从左向右滑动Div

当单击链接/按钮时，我有一个滑块，可将内容从上到下滑动。我希望它从按钮的右侧滑出并从左向右移动。这是可能的，只需调整我已有的代码？谢谢。从左向右滑动Div

HTML：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>jQuery Accordion Style DIV Menu</title> 
<link href="format.css" rel="stylesheet" type="text/css" /> 
<link href="text.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<script type="text/javascript" src="javascript.js"> </script> 
</head> 

<body> 
<div id="wrapper"> 

    <div class="accordionButton">Button 1 Content</div> 
    <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div> 
    <div class="accordionButton">Button 2 Content</div> 
    <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div> 
    <div class="accordionButton">Button 3 Content</div> 

    <div class="accordionContent">Content 1<br />Short Example</div> 
    <div class="accordionButton">Button 4 Content</div> 
    <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div> 
</div> 
</body> 
</html>

javascript.js：

$(document).ready(function() { 

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton').click(function() { 

    //REMOVE THE ON CLASS FROM ALL BUTTONS 
    $('.accordionButton').removeClass('on'); 

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
    $('.accordionContent').slideUp('normal'); 

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
    if($(this).next().is(':hidden') == true) { 

     //ADD THE ON CLASS TO THE BUTTON 
     $(this).addClass('on'); 

     //OPEN THE SLIDE 
     $(this).next().slideDown('normal'); 
    } 

}); 


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton').mouseover(function() { 
    $(this).addClass('over'); 

//ON MOUSEOUT REMOVE THE OVER CLASS 
}).mouseout(function() { 
     $(this).removeClass('over');          
}); 

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 


/******************************************************************************************************************** 
CLOSES ALL S ON PAGE LOAD 
********************************************************************************************************************/ 
$('.accordionContent').hide(); 

});

来源

2012-01-25 user1165861

也许这个链接可以帮助http://www.learningjquery.com/2009/ 02/slide-elements-in-different-directions –

@ABCade这个例子的问题是我不知道如何让div外的按钮nd仍然工作 – user1165861

没有，和你triyng做什么，我会建议一个插件。也许caroFredSel或nivo： http://nivo.dev7studios.com/

这会让你的生活更轻松。

来源

2012-01-25 18:59:22 Relic

这不是我正在寻找的滑块。很多试图获得像这个网站的滑块有http://www.grano.hu/ – user1165861

这些将是邪恶更容易编辑，比你有...我可以帮助你有什么，如果你想，但它会添加一堆代码来处理这些滑块已经做的事情。 – Relic

啊我看到了，我会试试看。谢谢！ – user1165861

检查：

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

有解释型动物滑梯

来源

2012-01-25 19:04:52 MCSI

雅我看到了这个例子，但是有可能移动div的外部按钮，并仍然使其工作？ – user1165861

是的，这是可能的，你只需要能够引用按钮和滑动内容，例如相对于另一个元素或通过ID绝对。 – c24w

@ c24w我不是很抱歉 – user1165861

使用此，

$('.accordionButton').click(function() { 
    $(this).next().animate({width: 'toggle'}); 
    });

来源

2012-01-25 19:09:12 Rahul

从左向右滑动Div

回答

相关问题