0

我在图像上有一个简单的不透明度淡入淡出，目前只使用 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秒的暂停？

这可能，我热衷于只使用一张图片，那是真的..

感谢您的任何提示。

4

1 回答 1

1

像这样的东西怎么样：

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);

});

或 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);

    });

或 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);

    });

?

已编辑：如果您想将 css 转换为 jquery，请不要使用 css 并使用 jquery（在 jsfiddle 中，您可以删除 css 转换等等），那么在您的情况下，您应该将事件绑定到主 img 父元素，检查它出：http: //jsfiddle.net/pmf68/8/

编辑 2：

如果你不需要跳过不透明度试试这个http://jsfiddle.net/pmf68/10/

于 2012-11-20T09:38:56.563 回答