Управление переходами CSS с помощью jQuery?

У меня есть простое исчезновение непрозрачности изображения, в настоящее время я просто использую css.

Работает нормально..

CSS

ul#project li img {
opacity: 0.5;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}

ul#project li img:hover{ opacity: 1;}

HTML

<ul id="project" class="inner clearfix">
    <li class="tv-thumb 67">
        <a href="#" rel="link">
        <img class='large-image' src='image.jpg' />         
        </a>
    </li>
</ul>

Возможно ли с помощью jQuery приостановить или вообще удерживать анимацию, например, вы наводите курсор на нее, она исчезает до полной непрозрачности, вы уходите, и перед исчезновением есть пауза в 5 секунд?

Это возможно, я очень хочу использовать только одно изображение, которое на самом деле..

Спасибо за любые советы.


jquery css fade
person user4630    schedule 20.11.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как насчет такого:

css

 #project li a{
    opacity:0.5;
    }

js-1

$('#project li a').bind('mouseover',function(){

  $(this).fadeTo(0,1);

}).bind('mouseout',funcion(){

 $(this).delay(5000).fadeTo(0,0.5);

});

or js-2

 $('#project li a').on('mouseover',function(){

      $(this).fadeTo(0,1);

    });

 $('#project li a').on('mouseout',funcion(){

     $(this).delay(5000).fadeTo(0,0.5);

    });

or js-3

$('#project li a').on('mouseenter',function(){

      $(this).fadeTo(1500,1);

    });

$('#project li a').on('mouseleave',function(){

      $(this).delay(5000).fadeTo(1500,0.5);

    });

?

EDITED: Если вы хотите перевести css в jquery, не используйте css и используйте jquery (в jsfiddle вы можете удалить переходы css и т. д.), то в вашем случае вы должны привязать событие к основному родителю img, поэтому элемент, проверьте его выход: http://jsfiddle.net/pmf68/8/

РЕДАКТИРОВАТЬ 2:

если вам не нужно прыгать с непрозрачностью, попробуйте вместо этого http://jsfiddle.net/pmf68/10/

person itsme    schedule 20.11.2012
comment
Если это 1.7+, .on() предпочтительнее, чем bind(). - person Matthew Blancarte; 20.11.2012
comment
Спасибо всем, я немного запутался, это вместо CSS? Я добавил выше, но ничего не произошло... - person user4630; 20.11.2012
comment
.on() в основном работает, связывается и делегирует все в одном, с бонусом повышенной эффективности. Если вы посмотрите на внутренности jQuery, вы увидите, что все эти три метода устарели и являются просто масками для делегирования событий с помощью .on(). Тем более, что так написано в мануале. :) - person Matthew Blancarte; 20.11.2012
comment
Кажется, я не могу заставить это работать, работает ли это с css или независимо, я пробовал оба, и мне не повезло.. :( - person user4630; 20.11.2012
comment
@ user4630 попробуйте вставить свой код на jsfiddle.net, а затем поместите ссылку здесь;) - person itsme; 20.11.2012
comment
проверьте здесь, вы можете удалить правила css для переходов, тогда вам придется подождать 5 секунд после mouseout :) jsfiddle.net/pmf68/8 - person itsme; 20.11.2012
comment
Спасибо, у этого есть элемент времени, но он не исчезает? Это просто прыжки из одной непрозрачности в другую...? - person user4630; 20.11.2012
comment
да, как вы и просили, он прыгает от непрозрачности к непрозрачности, в любом случае вы можете пошутить над fadeTo(); потому что первый параметр устанавливает задержку затухания следующим образом: fadeTo(delay,opacity); - person itsme; 20.11.2012
comment
давайте продолжим это обсуждение в чате - person user4630; 20.11.2012