0

我只是想知道是否有可能导致我使用 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');
  });

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

4

2 回答 2

0

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/

于 2013-06-12T20:01:29.660 回答
0

只是链接事件。要淡入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/

于 2013-06-12T20:26:29.240 回答