jQuery向下滑動面板

在我的網站上，我在頂部有一個面板，其中包含連續9個圖像。在頁面加載時，它是隱藏的，但它下面有一個標籤，你可以看到像div底部的3像素。jQuery向下滑動面板

我想要的是，當您將鼠標懸停在標籤或面板的可見部分上時，該框將向下滑動，然後當鼠標不再位於面板或標籤上時，div將向上滑動。我給了tab和div一個「滑塊句柄」類。這是HTML的樣子：

<div id="slider-wrapper"> 
    <div id="slider-content" class="slider-handle"> 
     <img src="blabla.jpg" /> (*9) 
    </div> 
    <div id="slider-tab" class="slider-handle"> 
     <span>Click here 2 open slider blabla.</span> 
    </div> 
</div>

而我想在jQuery是這樣的：

$(document).ready(function() { 
    $('.slider-handle').hover(function() { 
     $('slider-content').animate({ 
      height: '50px' 
     }); 
    }, function() { 
     $('slider-content').animate { 
      { 
       height: '3px' 
      }); 
    }); 
});

如果只有一個元素有滑塊手柄類，它會的工作，但由於有2個，當你從一個鼠標移動到另一個鼠標時，它仍然把這個事件當作'鼠標左滑動手柄元素'，並且像閃爍一樣。我希望將這2個元素設置爲SORT OF，因爲當您離開選項卡並輸入滑塊內容div時，由於鼠標沒有離開'滑塊句柄'，因此不會觸發h event事件......如果有道理...

來源

2011-05-07 Becky

在「... jQuery是這樣的：」之後折回回車，以便將代碼格式應用於下面的塊 – 2011-05-07 12:49:06

您可以使用slider-wrapper DIV，像這樣：

$(document).ready(function() { 
    $('#slider-wrapper').hover(function() { 
     $('#slider-content').animate({height: '50px'}); 
    }, function() { 
     $('#slider-content').animate({height: '3px'}); 
    }); 
});

，因爲它包含兩個元素，這些將被視爲一個。

希望這會有所幫助。乾杯

來源

2011-05-07 13:38:31

您可以使用現有的ID，並使用#slider-wrapper本身觸發「鼠標離開」事件，因爲它仍然會包裝標籤和

我以前click打開選項卡中的內容，但你也可以使用mouseenter

$('#slider-tab').click(function() { 
    $('#slider-content').slideDown('normal'); 
}); 

$('#slider-wrapper').mouseleave(function() { 
    $('#slider-content').slideUp('normal'); 
});

來源

2011-05-07 12:58:24 clairesuzy

jQuery向下滑動面板

回答

相關問題