jQuery 學習筆記之十三

在IE7中firefox瀏覽器上可以使用偽劣:hover來顯示導航效果，但是IE6並不支援除超連結外的元素使用這個偽類。在IE六下 hover css 無法運行 #navigation ul li:hover ul{   background-color:#88c366;   position:absolute;   widht:100px;   display:block; } 為<li>元素添加hover事件，jQuery代碼如下: $(function(){    $( "#navigation ul li:has(ul)" ).hover(function(){            //滑鼠移動過來,向下滑動顯示菜單       $( this ).children( "ul" ).stop( true , true ).slideDown(400);    },function(){       $( this ).children( "ul" ).stop( true , true ).slideUp( "fast" );  //收合菜單    }); })    展開關閉 $(function(){    $( ".module_up_down" ).toggle(function(){      var $self = $( this );      $self.prev().slideToggle(600,function(){        $( "img" ,$self).att( "scr" , "images/up.gif" );      })    },function(){     var $slef=$( this );     $self.prev().slideToggle(600,function(){        $( "img" ,$self).attr( "src" , "images/down.gif" );     });    }) })  //設定定時器 var scrollTimer= setInterval(function(){   scrollNews(x); },3000);  //當游標滑過內容時，動畫需要停止；當游標滑出後，動畫由繼續 $( ".scrollNews" ).hover(function(){     clearInterval(scrollTimer); },function(){       scrollTimer= setInterval(function(){        scrollNews(x);      },3000); });  //設定定時器 var scrollTime=setInterval(function(){     scrollTimes(x);   },3000);     function scrollNews(obj){     var $self = obj.find( "ul:first" );     var lineHeight = $self.find( "li:first" ).height(); //擷取行高     $self.animate({ "marginTop" :-lineHeight+ "px" },600,function(){ //設定滾動        $self.css({marginTop:0}).find( "li:first" ).appendTo($self); //重新設定marginTop ，把第一個值添加到最後。     });   }    //合并代碼   $(function()){     var $ this = $( ".scrollNews" );     $ this .hover(function(){       clearInterval(scrollTimer);     },function(){        scrollTimer= setInterval(function(){          scrollNews($ this );        },3000);     });     //設定定時器     var scrollTimer = setInterval(function(){        scrollNews($ this );     },3000);   }     $(function(){      var $ this = $( ".scrollNews" );      $ this .hover(function(){       clearInterval(scrollTimer);      },function(){        scrollTimer= setInterval(function(){          scrollNews($ this );        },3000);      });      var scrollTimer = setInterval(function(){        scrollNews($ this );      },3000);   });      function scrollNews(obj){     var $self = obj.find( "ul:first" );     var lineHeight = $self.find( "li:first" ).height; //擷取行高     $self.animate({ "marginTop" :-lineHeight+ "px" },600,function(){       $self.css({marginTop:0}).find( "li:first" ).appendTo($self);     })   }    //與hover事件的第2個函數中繼續執行動畫的代碼完全相同，那麼能否讓它們合并？能否直接觸發hover事件的第2個函數?   hover() 方法得含義是滑鼠滑入滑出，它對應著2個事件，即mouseenter和mouseleave，因此可以通過trigger( "mouseleave" )函數來觸發hover事件的第2個函數      $(function(){       var $ this = $( ".scrollNews" );       var scrollTimer;       $ this .hover(function(){          clearInterval(scrollTimer);       },function(){         setInterval(function(){          scrollNews($ this );         },3000)       }).trigger( "mouseleave" );     });      //當使用者進入頁面後，就會觸發hover事件的第2個函數，從而使內容滾動起來，與前面的效果相同，但代碼簡化了很多，同時scrollTimer提前顯示聲明      避免scrollTimer作為一個全域變數而造成代碼衝突。