Question

基本上，我目前有一个下拉菜单，当您单击标题时会显示链接。我希望将其更改为水平幻灯片，但我目前只使用HTML和CSS，换句话说，我不是很擅长jquery / javascript。

所以，这是一个例子（点击类别）http://newsunken.tumblr.com/ 我希望这样当您点击类别时，类别从左向右滑动并显示为“CATEGORIES TEES JUMPERS HEADWEAR” 抱歉，这是一个菜鸟问题！

$('#box').click(function()
{ 
$(this).animate({
    width: '350px'
  }, 300, function() {
    // Animation complete.
  });
});

和

<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>

这是我能想到的最好的东西，但不像newsunken.tumblr.com那样光滑。

Answer 1

我不确定这是不是你想要的，但试试这个：

$('#box').click(function()
{ 
$(this).animate({
    height: 'toggle',
    width: '350px'
  }, 300, function() {
    // Animation complete.
  });
});

Answer 2

这个脚本水平滑动，以防我显示整个页面。请注意document.ready功能

<html>
<head>
<title>sliding</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
     $('#box').click(function()
    { 
        $(this).animate({width: '350px'}, 300, function() {
        // Animation complete.
        });
    });    
});
</script>
</head>
<body>
    <div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
</body>
</html>

水平滑动jquery

2 个答案: