我使用CSS和jQuery的組合來在瀏覽器的右側創建一組選項卡，它的工作原理與它應該有一個缺陷一樣。右側出現的圖片讓用戶點擊並將選項卡的其餘部分滑動到視圖中，只是將某種「彈出」到應該在的位置而不是滑動，而實際內容正常滑動。不能讓右手jQuery選項卡正常動畫

我試過在tab-handle-container類中使用.animate和其他效果，但都沒有成功。我已經發布了我的HTML，jQuery和CSS代碼，以供您提供任何提示。另外，我期待在IE8和9中有這項工作，目前還沒有真正關心其他瀏覽器。謝謝！

HTML和jQuery

<script> 
$(document).ready(function(){ 
    $(".content").hide(); 
    $(".myhandle").click(function(){ 
    $(".content", $(this).parents("li")).toggle('slide',{direction: "right"}, 1000); 
    }); 
}); 

</script> 


<html> 
<body> 
<div class="Container"> 
    <ul class="tab-list"> 
     <li> 
      <div class="content"> 
      <h3>Contact Information</h3> 
      <p>If you need technical assistance, please</p> 
     </div> 
     <div class="tab-handle-container"> 
     <img class="myhandle" src="contacttab.bmp"></img> 
     </div> 
    </li> 
    <li> 
     <div class="content"> 
     <h3>Some more stuff</h3> 
     <p>This will be where more content is displayed</p> 
     </div> 
     <div class="tab-handle-container"> 
     <img class="myhandle" src="email.jpg"></img> 
     </div> 
    </li> 
</ul>

CSS

html {margin: 0px;} 

.myhandle { 
    cursor: hand; 
} 
.container { 
right: -210px; 
width: 240px; 
height: 240px; 
} 
.tab-handle-container { 
margin: 0px; 
border: 0px; 
width: 40px; 
float: left; 
} 
.content{ 
padding: 5px; 
float: left; 
width: 200px; 
background-color: #ffffff; 
}

來源

2012-05-16 Nick

它看起來像是將動畫應用於'.content'。該圖像不駐留在'.content'中。你有沒有嘗試將動畫應用到'li'或者'.content'和'.tab-handle-container'？ – Quantastical

MrSlayer我已經嘗試在'.tab-handle-container'中添加一個.animate，它似乎沒有正確應用這個效果，或者我錯了。據你所知，是否有可能做一個'.toggle（）'而不是顯示/隱藏一個元素，而是將它來回移動？ – Nick

將兩個函數傳遞給'.toggle（）'方法。有關更多信息，請參閱[jQuery API]（http://api.jquery.com/toggle-event/）。 – Quantastical

使用.toggle加送一個div這兩個元素MrSlayer的幫助下解決了這個問題，轉而使用CSS滾動關閉，然後用這個

$(document).ready(function(){ 
    $(".myhandle").toggle(function(){ 
     $(".slider", $(this).parents("li")).animate({right: "+=200"}, 700); 
    }, 
    function() { 
     $(".slider", $(this).parents("li")).animate({right: "-=200"}, 700); 
     } 
    ); 
});

來源

2012-05-17 12:12:45 Nick

不能讓右手jQuery選項卡正常動畫

HTML和jQuery

CSS

回答

相關問題