Question

这里我的代码完美无缺，但我希望当鼠标悬停在按钮上时，img标签和新类的更改将会平滑淡入淡出。这可能吗？

jQuery的：

        $('.hover').mouseenter(function() {
            $(this).next().removeClass('hide')
            var src = $(this).attr("src").match(/[^\.]+/) + "_hover.svg";
            $(this).attr("src", src)
        });     

        $('.hover').mouseleave(function() {
            $(this).next().addClass('hide')
            var src = $(this).attr("src").replace("_hover.svg", ".svg")
            $(this).attr("src", src)
        });

HTML：

<div class="facebook">
           <a href="#">
            <img class="fb_logo hover" src="img/facebook_logo.svg" alt="Facebook Logo" />
            <img class="fb_text hide" src="img/facebook_text.svg" alt="Facebook Text" />
          </a>
</div>

Answer 1

不确定这是否是您正在寻找的，但似乎您需要一个简单的淡入/淡出图像切换器。这是一种方法：

<div class="facebook">
<a href="#">
    <!-- Start with one image on the page. We'll change the src attribute with JavaScript -->
    <img src="https://dmcohen01.files.wordpress.com/2012/03/5b2145c4aakermit.jpg"/>
</a>
</div>




// Now for the JavaScript:
$('img').mouseenter(function() {
    var self = $(this);
    self.fadeOut('slow', function(){
        self.attr('src', 'http://images4.wikia.nocookie.net/__cb20100831164753/muppet/images/7/70/Firstmatepiggy.jpg').fadeIn('slow');
    });
});

$('img').mouseleave(function(){
    var self = $(this);
    self.fadeOut('slow', function(){
         self.attr('src', 'https://dmcohen01.files.wordpress.com/2012/03/5b2145c4aakermit.jpg').fadeIn('slow');
    });
});

这是一个小工具：http://jsfiddle.net/brianeoneill/uTpWp/

jQuery - 淡化img的变化

1 个答案: