在菜單中單擊時滑動內容

我只需要在左側單擊一個簡單的網站菜單，當點擊右側鏈接的內容之一就會向左滑動。在菜單中單擊時滑動內容

工作撥弄here

HTML

<div class="contentLeft"> 
     <ul> 
      <li><a class="selectBox" href="#">sample</a></li> 
      <li><a class="selectBox" href="#">sample1</a></li> 
      <li><a class="selectBox" href="#">sample2</a></li> 
     </ul>  

    </div> 

<div class="contentRight"> 
    <div class="selectBoxContent">its</div> 
    <div class="selectBoxContent">my</div> 
    <div class="selectBoxContent">way</div> 
</div>

jQuery的

$(function() { 

      $('.selectBox').click(function() { 
     $('.selectBoxContent').slideLeft('fast'); 
     return false; 

    }); 
     });

CSS

.contentLeft { 
    border:1px solid green; 
    width:30%; 
    float:left; 
} 

.contentRight { 
    border:1px solid red; 
    width:64%; 
    float:right; 
    height:400px; 
} 
.selectBoxContent { 
    width:100%; 
    height:400px; 
    display:none; 
}

來源

2013-02-21 jhunlio

我不相信slideLeft是jQuery的一部分。 slideDown工作得很好。也許你可以用slideToggle做點什麼？ – Gregg 2013-02-21 05:32:14

thak's for the reply @tas我也不確定是否還有我的'jquery'代碼，當點擊內容向左滑動的菜單之一時，它僅使用一個簡單的jquery就可以了嗎？ – jhunlio 2013-02-21 05:42:00

看到此[回覆]（http://stackoverflow.com/a/14996084/1516616），希望這將是您的答案。 – 2013-02-21 06:41:45

你可以使用.animate而不是滑動。因此，像

JQuery的

$(function() { 
    $('.selectBox').click(function() { 
    $('.selectBoxContent').fadeIn().animate({ 
     right: "0" 
    }, 1000); 
    return false; 
    }); 
});

CSS

.contentRight { 
    border:1px solid red; 
    width:64%; 
    float:right; 
    height:400px; 
    overflow: hidden; 
    position: relative; 
} 

.selectBoxContent { 
    width:100%; 
    height:400px; 
    display:none; 
    right: -100%; 
    position: relative; 
}

來源

2013-02-21 06:04:40 Supportie

通過使用jQuery UI - Slide Effect我們可以做到這一點。

jQuery的：

$('.selectBoxContent').toggle("slide"); 
    return false; 
});

SEE DEMO

來源

2013-02-21 06:40:14

嗨，這是可能的當'sample'鏈接點擊'fist div'時，它的'link'擁有一個'div'，唯一的''slide'？ – jhunlio 2013-03-05 01:39:24

在菜單中單擊時滑動內容

回答

相關問題