0

jQueryを使用して実行するcss背景の変更をfadeIn関数で強化できるかどうか疑問に思っていました。非表示の div を使用してこれを実現できることはわかっていますが、1 つの div を使用し、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);私は無駄にネストしようとしました。誰にもアイデアはありますか？

4

2 に答える 2

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 に答える