在jQuery中为切换图像添加CSS转换

Question

我想在我的切换图像之间添加一个过渡（淡入/淡出）。那可能吗？

http://jsfiddle.net/Xroad/rY8Bq/

$(function(){

var $toggleImg = $('.toggleImg');

    function fnToggleImg(e){
        if (e.type == 'click') {
            $(this).data('clicked', !$(this).data('clicked'));
        } else if (!$(this).data('clicked')) {
            this.src = this.src.indexOf('-hover') == -1 ? this.src.replace("-normal", "-hover") : this.src.replace("-hover", "-normal");
        }
    }

    if (Modernizr.touch){
        $toggleImg.hammer();

            $('img.rollover').on('touchstart touchend', fnToggleImg);
         } else {
            $('img.rollover').on('mouseenter mouseleave', fnToggleImg);
    }

$toggleImg.on(Modernizr.touch ? 'tap' : 'click', fnToggleImg);

});

Answer 1

Jquery .toggle（）使用'display'属性，但没有可用的css转换。

但您可以使用切换Go down this page for examples

在Jquery过渡中使用buit

Answer 2

最简单的方法是创建一个类并使用jquery切换类。

您的默认类将设置过渡属性以及时间和初始属性，如不透明度：0;然后可以添加一个具有不透明度1的新类;组。这将触发点击/切换时的css转换。

希望有所帮助。