Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: JQurery мигание картинко, остановка при hover
цитата
12/09/11 в 14:13
 Vyacheslav
Подскажите как оптимально забацать скриптец:
1) Есть кнопка (элементарная <img id=..>). Эта img должна по дефолту плавно мигать прозрачностью.
2) При наведении мышью на кнопку, мигание прекращяется с непрозрачностью 1 (100%).

1й пункт сам по себе реализуем на примерах, но вот привязка 2го пункта уже часов 10ть не даёт покоя icon_mrgreen.gif
цитата
12/09/11 в 15:52
 LeadFarmer
ну ты бы хоть код выложил посмотреть icon_smile.gif
цитата
12/09/11 в 16:02
 goodlover
Можно по ховеру применять другой класс со 100% непрозрачностью.
А до этого отрабатывать изменение прозрачности. icon_rolleyes.gif
цитата
12/09/11 в 20:05
 freeek
как говориться,- сделано "на коленке", чисто из любопытства, но главное, что работает, если я правильно понял суть

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hover jQuery</title>
    <style type="text/css">
/*<![CDATA[*/

    body{
    background: silver;
    text-align: center;
    }


    button{
    width: 100px;
    height: 100px;
    cursor: pointer;
    }
    /*]]>*/
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">
</script>
    <script type="text/javascript">
//<![CDATA[
(function () {
    function flashing(event, button, conf) {
        if (conf.flashing) {
            conf.state = !(conf.state);
            conf.state ? button.fadeOut(500) : button.fadeIn(500);
        }
        setTimeout(function () {
            flashing(event, button, conf);
        }, 1000);
    }
    var conf = {
        flashing: true,
        state: 0
    }
    $(function () {
        var myButton = $("#flashing");
        myButton
            .bind("flashing", flashing)
            .trigger("flashing", [myButton, conf])
            .hover(
                function (e) {
                    conf.flashing = false;
                    conf.state = 0;
                    $(this).fadeIn(500);
                },
                function (e) {
                    conf.flashing = true;
                }
            );
    });
})();
    //]]>
    </script>
</head>

<body>
    <button id="flashing">My Button</button>
</body>
</html>


пришел к тому что нужен объект который бы хранил состояние
цитата
12/09/11 в 20:39
 idk2045
freeek писал:
как говориться,- сделано "на коленке", чисто из любопытства, но главное, что работает, если я правильно понял суть

херасе ты альтруист такое забацать smail101.gif
цитата
12/09/11 в 21:38
 Vyacheslav
grozny писал:
херасе ты альтруист такое забацать smail101.gif

угу, заценил страдания!

Вобще я за основу юзал этот пример:

Код:
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){

setInterval(
function()
{
$("#test").fadeTo(700,0).fadeTo(700,1);
},100);
});
</script>

...

<h1 id=’test’>Мигающий текст!!!</h1>


Последний раз редактировалось: Vyacheslav (12/09/11 в 21:55), всего редактировалось 1 раз
цитата
12/09/11 в 21:42
 Vyacheslav
Но всё-равно молоток, я сначала кстати этот код же юзал.
Только не догонял, как hover должен останавливать.
цитата
12/09/11 в 21:45
 freeek
jQuery API если надо

главное сама мысль в каком направлении идти, а дальше переделать можно как угодно smail54.gif
цитата
12/09/11 в 21:54
 Vyacheslav


Да я тоже так думал, что мин 15-20 потрачу, с условием, что раза три за жизнь на javascript что-то лабал.. Но как оказалось, отсутствие знаний архитектуры языка и особенностей jquery сильно ударило по яйцам!
цитата
13/09/11 в 23:38
 Vyacheslav
Ещё такой вопрос..
Стоит ли выносить jQuery код (подобный тому, что разработал freeek:) в отдельные документы js или непосредственно в <head> самого документа, в альтернативу включения в общий main.js? Имеею ввиду, не смешивать с тем кодом, который может рабоать самостоятельно. Если сам jQuery вдруг не подключится (гипотетически), то код для jQuery может как-то навредить коду, который должен работать без него..
цитата
14/09/11 в 23:53
 freeek
Код:
function FlashingElement(elemID) {
    if (!window.jQuery) return;
    var myButton = jQuery(elemID);
    var flashing = true;
    myButton.hover(

    function (e) {
        flashing = false;
        $(this).show();
    }, function (e) {
        flashing = true;
    });
    setInterval(function(){
        if (flashing) {
            myButton.fadeOut(700).fadeIn(700);
        }
    },1000);
}


вот, еще укороченный вариант, можешь ее в отдельный файл положить, если надо

вызывать в блоке инициализации jQuery, либо после элемента, который надо анимировать, в общем как обычный скрипт (при условии что jQuery загружен, иначе работать не будет)

вызывать так
Код:
FlashingElement("#someID");


в принципе что передавать в функцию, если надо сам решишь, там не сложно переделать


Эта страница в полной версии