Как последовательно загружать изображения при наведении курсора с помощью Jquery - PullRequest
Новая
       21

Как последовательно загружать изображения при наведении курсора с помощью Jquery

0 голосов
/ 21 ноября 2011

Недавно я использовал симпатичный маленький jquery-скрипт, который последовательно загружает изображения с заданным классом и постепенно выгружает их один за другим при загрузке страницы.

Jquery 

$(function() {
$(".faded").hide()    
$(".faded").each(function(i) {
    $(this).delay(i * 100).fadeIn(500);
});
});

Пример HTML 

<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
.....

Пример этого в действии можно посмотреть здесь http://comill.com/animation/

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

Например, в приведенной выше демонстрационной ссылке только зеленый диск будет виден на странице, и когда пользователь наводит курсор на этот диск, лепестки постепенно исчезают один за другим. В идеале лепестки должны исчезать сразу при наведении мыши.

Я потратил некоторое время на изучение этого вопроса и чувствую, что его должно быть довольно просто достичь, однако до сих пор я не нашел решения при поиске в Google, поэтому, если кто-то сможет предоставить решение, любая помощь будет принята с благодарностью.

1 Ответ

2 голосов
/ 21 ноября 2011

используйте .hover() на зеленом элементе диска

для вашего примера, приведите следующий код: 

$(document).ready(function(){
    var faded = $(".faded");
    faded.hide();
    $('#midbut').hover(function(){
        // mouseenter
        faded.each(function(i) {
            $(this).delay(i * 100).fadeIn(500);
        });
    }, function(){
        // mouseleave
        faded.fadeOut(500);
    });
});

также вы не должны скрывать элементы с помощью jquery, если вы можете сделать это с помощью css на странице init

...