Javascript圖像滑動

在我以前的文章中，我使用JQuery來控制一個單獨的HTML元素之後，我想我會好起來的，但是我還沒有被再次陷入一個令人困惑的位置。Javascript圖像滑動

我能夠在不傳遞單個元素的情況下工作，但是我不希望我的頁面上的每個動畫都會觸發一次圖像翻轉。

我將在下面提供一個JSFiddle鏈接以及我的腳本。

 <!-- slide image --> 
    <script> 

     function slideImage(elem) 

     { 

      //Hide both the hover and overlay divs 
      ".galleryHover".hide();    

      ".galleryOverlay".hide(); 


      //When the container div is hovered over trigger these events... 
      $(".galleryContain",$(elem).parent()).hover(function() 
      { 
       //Slide .galleryHover along z-axis from -400 to 0 so its visible at a speed of 0.6s 
       $(".galleryHover",$(elem).parent()).stop().show().css({ "left" : "-400px"}).animate({ left : 0}, 600); 

       //Fade in the background overlay in 0.75s to 0.9 opacity 
       $(".galleryOverlay",$(elem).parent()).stop().fadeTo(750, 0.9) 

       //On mouse out... 
      }, function(){ 

       //Slide .galleryHover +450 on the z-axis to provide illusion of sliding off the other way. 
       $(".galleryHover",$(elem).parent()).stop().animate({ left : 450}, 750) 

       //Over the course of 1 second, fade the background to 0 opacity. 
       $(".galleryOverlay",$(elem).parent()).stop().fadeTo(1000,0) 

      }); 

     }); 

    </script>

我試圖觸發，當我的DIV懸停在此事件（這是我認爲我錯了，因爲我敢肯定，你可以觸發這樣的事件）

   <!-- OBJECT TO CONTAIN 1 GALLERY ITEM --> 
       <div onhover="slideImage(this);" class="galleryContain"> 

        <div class="galleryOverlay"> 

        </div> 

        <div class="galleryHover"> 

         <h1>Cool hovering slide effect!</h1> 

         <a href="#" onhover="slideDiv(this);"> <p class="blueText">08/03/2013 - ESPN Spoof for HP :</p> </a> 

        </div> 

       </div>  <!-- END FIRST ITEM -->

的jsfiddle可以在這裏找到：http://jsfiddle.net/w3RqG/2

請注意，這個版本的作品，因爲它的目標和動畫在鼠標懸停ALL元素

任何幫助，將不勝感激

問候

亞歷克斯。

來源

2013-03-12 Alex

你聲明懸停的範圍之外的全局變量 - 我會後在短短的時刻一個例子，但本質上的變化全部內容和覆蓋$（this）.find（'。galleryHover'）和$（this）.find（'galleryHover'） – Syon 2013-03-12 19:51:01

範圍變量懸停，所以你的目標是正確的懸停&疊加元素。在你的例子中，你將所有'.galleryHover'分配爲content。通過將其移動到懸停功能中並指定.find()，您只能在元素內搜索該元素。

Updated jsFiddle

$(document).ready(function(){ 
    $('.galleryOverlay, .galleryHover').hide() 
    $(".galleryContain").hover(function(){ 
     var $this = $(this), 
      $content = $this.find('.galleryHover'), 
      $overlay = $this.find('.galleryOverlay'); 

     $content.stop().show().css({ "left" : "-400px" }).animate({ left : 0}, 600); 
     $overlay.stop().fadeTo(750, 0.9) 
     } ,function(){ 
     var $this = $(this), 
      $content = $this.find('.galleryHover'), 
      $overlay = $this.find('.galleryOverlay'); 

      $content.stop().animate({left : 450}, 750) 
      $overlay.stop().fadeTo(1000, 0) 
     }); 
});

（對不起，我擦你的意見）

來源

2013-03-12 19:54:43 Syon

非常感謝 - 你是一個拯救生命的人！ – Alex 2013-03-12 20:48:03

Javascript圖像滑動

回答

相關問題