标签: slidetoggle

我知道hover()有默认设置handIn和handOut,但反正我有可以检测slideUp和SlideDown里面SlideToggle？

有这样的代码:

$("#divName").slideToggle(function(){//when slideUp, do something},
                          function(){//when slideDown, do something});

我尝试过这段代码,但没有运气,你们认为这有时会让事情变得更容易吗？

似乎它只是为一些循环,然后它稳定.此人在此视频中遇到了类似的问题:http://www.youtube.com/watch？v = KCFeImyBzfE

此外,此代码的另一个问题是,一旦您显示跟踪列表,然后再次隐藏它,单词将停止切换.它最终说"隐藏跟踪列表",它们已经被隐藏了.

<script type="text/javascript">
$(document).ready(function() {
   $('.fullTracks').hide();
   $('.tracklist').click(function() {
      $('.fullTracks').slideToggle('medium');
      if ($('.fullTracks').is(':hidden')) {
         $(this).text('Show Tracklist');
      } else {
         $(this).text('Hide Tracklist');
      }
   });
});
</script>

我需要创建一个向上动画而不是向下动画的切换,换句话说就是"正常"切换的反向.也许更简单的是切换应该在菜单项(它是一个菜单)上方滑动以变得可见而不是像普通的slideToggle等那样向下滑动.我几乎在这里:

var opened = false;
$("#coltab li").click(function(){
    if(opened){
        $(this).children('ul').animate({"top": "+=300px"});
    } else {
        $(this).children('ul').animate({"top": "-=300px"});
    }
    $(this).children('ul').children().slideToggle('slow');
    $(this).children('ul').toggle();
    opened = opened ? false : true;
});

但是,如果你"切换"一个项目,那么第二个项目(向下滑动)下降300px不会向上滑动(提升)300px.我想要实现的一个好例子(讨厌网站)是http://market.weogeo.com/#/home和底部的"标签".

我的HTML代码正在使用

<ul id="#coltab">
<li>Item 1
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
<li>Item 2
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
etc ...
</ul>

在CSS方面

ul#coltab { position: relative' blah; blah; }

和

ul#coltab  ul { display: none; position: absolute; blah; blah; }

有任何想法吗？

如果在打开"点击"切换之前每次"点击"关闭前一个切换,那将是很好的.

HTML

<div class="comments">
    <a class="toggle" href="#">Toggle Comment 1</a><br />
    <div class="comment" style="display:none;">
        Comment1
    </div>
    <hr />
    <a class="toggle" href="#">Toggle Comment 2</a><br />
    <div class="comment" style="display:none;">
        Comment2
    </div>
</div>

JavaScript的

$(function(){
    $('.toggle').click(function() {
        $(this).parent().find('.comment').slideToggle();
        return false;
    });
});

可以在这里查看:http://jsfiddle.net/saiprex/ESM4m/

我怎么能切换comment点击而不是全部？

干杯,帕夫

<div class="searchDiv">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

我试图$("div.searchDiv").slideToggle("slow");用searchDiv最初隐藏的类来调用div display:none.在这4个div中还有一些div元素与class row.是否将元素放置在主div中是否重要,searchDiv因为我发现切换效果对于放置在主div内的元素不是平滑的.

我正在使用jQuery slideToggle来显示隐藏的表格行,但它将显示样式设置为阻止,我需要显示表格行.任何想法我怎么能做到这一点？

提前致谢

目标

当用户单击该按钮时,相关div将:

1. 滑下
2. 停
3. 淡出内容

当用户再次单击该按钮时,div将:

1. 淡出
2. 停
3. 向上滑动

当前位置

这是一个fadeIn和fadeOut在正确的时间发生但fadeIn和fadeOut之前和之后没有幻灯片效果的例子
http://jsfiddle.net/tkRGU/1/

此选项还有slideToggle功能,但分别在幻灯片之前和之后没有出现fadeIn和fadeOut.
http://jsfiddle.net/MY8DD/7/

我的jQuery函数生成的动画很不稳定,我一直在寻找不同的SO解决方案,例如添加jquery.easing,但没有运气.问题是每个div中的iframe吗？

关于如何平滑动画的任何想法？我的基本切换功能是最好的方法吗？

JSFiddle: http ://jsfiddle.net/gwLcD/8/

基本标记在下面,并在页面上重复多次(每个"录像带"div之间有文本块):

 <div class="videotoggle">

    <p><h2 class="entry-title">View a few minutes of the (title) video </h2></p>

    <div class="videoblock">

    <iframe width="560" height="315" src="http://www.youtube.com/embed/????????"
    frameborder="0" allowfullscreen></iframe>

    </div></div>

功能:

$(document).ready(function(){
$(".videoblock").hide();  //closes all divs on first page load
$(".entry-title").click(function() {
    $this = $(this);  //this next code only allows one open div at a time
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").slideToggle(400);  //slide toggle
        $content.slideToggle(400);
    }
});
});

这是我用来隐藏和显示带有幻灯片切换效果的div的代码.

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
        });
    });

但是我想添加一些切换箭头来显示切换的div是向上还是向下.

这是我到目前为止所做的一切,它做了我希望它做的一半:

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery("#arrow-up").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
            jQuery("#arrow-up").toggle();
            jQuery("#arrow-down").toggle();
        });
});

这会切换箭头,但有两个问题:

1. 向下箭头保持显示
2. 每个div都会切换每一个箭头,所以当一些div上升而另一个下来时,它们都显示为向下.

任何想法都会受到关注

我有一个简单的菜单,如下所示:

<ul id="navigation">
    <li id="m_li">
         <div><span>+</span><a href="#" >myself</a></div>
        <ul class="test" id="x_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Audio</a>
            </li>
        </ul>
    </li>
    <li id="profile_modeling_li">
        <div><span>+</span><a href="#" >friend</a></div>
        <ul class="test" id="y_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Video</a>
            </li>
        </ul>
    </li>
</ul>

然后我使用jquery所以当我点击+标志时,ul滑下来:

$("#navigation > li > div > span").click(function(){

    if(false == $(this).next('ul').is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next('ul').slideToggle(300);
});

问题是,$(this).next('ul')似乎并不喜欢下一个ul

任何想法我做错了什么？