如何使div从右到左滑动 [英] how to make div slide from right to left

问题描述

从某人....这里有一个代码。

我喜欢的是使滑动div从右滑动到左边，我的意思是它隐藏div

 <$ c $ 
 c>< a id =loginPanel> quote< / a> 
< div id =userNav>用户区< / div> 
  

CSS

  #loginPanel {
 color：＃000; 
 cursor：pointer; 
} 
 
 #userNav {
 width：200px; 
 height：200px; 
 display：none; 
 background：＃ff0000; 
} 
  

Jquery

  //打开/关闭面板根据Cookie // 
 if（$ .cookie（'panel'）=='open'）{
 $（'＃userNav '）.slideDown（'fast'）; 
} else {
 $（'＃userNav'）。slideUp（'fast'）; 
} 
 
 //切换面板并设置Cookie // 
 $（'＃loginPanel'）click（function（）{
 $（'＃userNav' ）.slideToggle（'fast'，function（）{
 if（$（this）.is（'：hidden'））{
 $ .cookie（'panel'，'closed'）; 
} else {
 $ .cookie（'panel'，'open'）; 
} 
}）; 
} 
  

请需要帮助。只是为了让div向右滑动

这里是小提琴 http://jsfiddle.net/7m7uK/195/

解决方案

您可以使用jQueryUI和其他效果

http://docs.jquery.com/UI/Effects/Slide

示例：

  $（'＃userNav'）。hide（slide，{direction：left}，1000）; 
 $（'＃userNav'）。show（slide，{direction：right}，1000）; 
  

您不能使用.slideToggle（）从左向右滑动，反之亦然， a href =http://api.jquery.com/slideToggle/ =nofollow> http://api.jquery.com/slideToggle/ ：

.slideToggle（）方法动画匹配元素的高度。
这会使页面的下部向上或向下滑动，显示为
显示或隐藏项目。如果元素最初显示，它
将被隐藏;

您应该尝试并更改代码以实现此代码，但我认为这可能更好if您尝试使用 @ s15199d 答案，而不需要使用jQueryUI

好吧，我创建了jsfiddle，你必须包括jQueryUI为了工作，你有不同的幻灯片方向的组合：

http://jsfiddle.net/7m7uK/197/

好的，使用Cookie创建了另一个小提琴

http：// jsfiddle。 net / 7m7uK / 198 /

got a code here from someone....

what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.

HTML

<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>

CSS

#loginPanel {
    color: #000;
    cursor:pointer;
}

#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

Jquery

// Open / Close Panel According to Cookie //    
if ($.cookie('panel') == 'open'){    
    $('#userNav').slideDown('fast');
} else {
    $('#userNav').slideUp('fast');
}

// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){        
    $('#userNav').slideToggle('fast', function(){
        if ($(this).is(':hidden')) {
            $.cookie('panel', 'closed');
        } else {
            $.cookie('panel', 'open');
        }
    });
});

Please need help on this one. just to make the div slide right to left

here is the fiddle http://jsfiddle.net/7m7uK/195/

解决方案

You can use jQueryUI and additional effects Slide

http://docs.jquery.com/UI/Effects/Slide

Example:

$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);

You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

You should try and change your code to implement this code, but I think it's maybe better if you try with @s15199d answer, than you don't need to use jQueryUI

Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:

http://jsfiddle.net/7m7uK/197/

Ok, created another fiddle with cookies

http://jsfiddle.net/7m7uK/198/

这篇关于如何使div从右到左滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！