Question

我有这个jquery函数，它通过改变其他非上面悬停的图像的不透明度来突出显示在图像上的悬停。是否可以添加一个计时器，以便不透明度的变化采取类似的动作淡出淡出？谢谢！

   jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').css({'opacity':0.4}); // you can animate this as well
            $(this).css({'opacity':1});
        }, function() { // on mouseout
            $('#first img').css({'opacity':1});
        });
    });

Answer 1

您可以使用animate

jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').stop().not(this).animate({'opacity':0.4},500); // select all image except the hovered and also stop all previous animations
            $(this).stop().css({'opacity':1},500);
        }, function() { // on mouseout
            $('#first img').stop().animate({'opacity':1},500);
        });
    });

<强>样本

jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').stop().not(this).animate({'opacity':0.4},500); // you can animate this as well
            $(this).stop().animate({'opacity':1},500);
        }, function() { // on mouseout
            $('#first img').stop().animate({'opacity':1},500);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
        <img src="http://goo.gl/osWLNm" width="100" class="firstimage" />
        <img src="http://goo.gl/umj4bX"  width="100" class="firstimage" />
        <img src="http://goo.gl/W1fumF" width="100" class="firstimage" />
        <img src="http://goo.gl/wMb04Z" width="100" class="firstimage" />
       
    </div>

Answer 2

 $('#first img').animate({'opacity':0.4}, 1000);

Answer 3

添加

#first img { transition: opacity 0.3s ease; }

到您的CSS。

这个jquery函数可以添加一个计时器吗？

3 个答案: