Question

我只是想知道是否有可能导致我使用jQuery执行的css后台更改可以使用fadeIn函数进行增强。我知道这可以使用隐藏的div来完成，但我更喜欢使用1 div和fadeIn来自CSS的图像。这是没有淡入淡出的工作脚本。

jQuery('nav .home a').mouseover(function()
  {
    jQuery('.viewport').addClass('viewporthome');
  });
jQuery('nav .home a').mouseout(function()
  {
    jQuery('.viewport').removeClass('viewporthome');
  });

我尝试嵌套jQuery(jQuery('.viewport').addClass('viewporthome')).fadeIn(1000);无济于事。有人有什么想法吗？

Answer 1

Jquery UI（jqueryui.com）提供了作为扩展名。除此之外，您需要应用样式并为其设置动画。

编辑：

你不能将内容与背景分开淡化，但你可以使用img标签伪造背景并淡化它们：

CSS：

#img1.over { opacity: 1; }
#img1.out { opacity: 0; }
#img2.over { opacity: 0; }
#img2.out { opacity: 1; }

.bgndimg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

HTML：

    <div id="outer">
       <img id="img1" class="bgndimg out" src="http://i.imgur.com/3KZlvif.jpg?1"></img>
       <img id="img2" class="bgndimg out" src="http://i.imgur.com/LCjgi.jpg"></img>
    </div>

JS：

    $('#outer').hover(function() {
       $('#img1,#img2').toggleClass('over',[15000]).toggleClass('out',[15000]);
     });

http://jsfiddle.net/9eJVS/1/

Answer 2

将事件链接起来。要淡出div，请执行以下操作：

jQuery('nav .home a').mouseover(function(){
    jQuery('.viewport').hide().addClass('viewporthome').fadeIn(500);
  });

要在mouseout上获得相同的效果，请使用回调函数：

jQuery('nav .home a').mouseout(function(){
    jQuery('.viewport').fadeOut(500, function(){ 
        //this is the callback function and runs after div fades out
        $(this).removeClass('viewporthome');
     });
  });

样本： http://jsfiddle.net/dirtyd77/Q4wK5/

是否可以在css更改中添加jQuery fadeIn函数？

2 个答案: