Question

我有一个滑块，可以在单击链接/按钮时从上到下滑动内容。我希望它从按钮的右侧滑出并从左向右移动。这可以通过调整我已有的代码来实现吗？感谢。

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();

});

Answer 1

检查一下：

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

解释了不同的幻灯片

Answer 2

不，对于你想要做的事情，我会推荐一个插件。也许carouFredSel或nivo： http://nivo.dev7studios.com/

这将使您的生活变得更轻松。

Answer 3

使用此，

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

从左到右滑动Div

3 个答案: