jquery slideUp出现滑动效果停滞的问题

最新推荐文章于 2024-04-01 01:16:06 发布

原创最新推荐文章于 2024-04-01 01:16:06 发布 · 703 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #php #ViewUI

jquery 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在特定布局下使用jQuery实现滑动动画时出现的停滞现象，并提供了解决方案。通过调整动画元素的位置及使用更合适的动画方法，可以有效避免背景影响导致的动画效果不佳。

<div class="w-cnt-contain">
		<div class="w-cnt" id="<?php echo $rand_string;?>">
			<div class="m_table m_table_mybiz_widget"  id="m_table_mybiz_widget" style="width:100%;">
			</div>
		</div>
	</div>

w-cnt 有个背景在左侧， m_table_mybiz_widget 在右侧

使用 $("w-cnt").slideUp(500);有停滞，滑动效果受背景的影响

在外面使用一个没有div括起来使用动画效果就可以了

此外，使用toggle，只会知道交换执行两个方法，并不能区别是什么动作，例如下面，如果之前有的是展开状态有的是收缩状态，

$(".widget .w-title .desc-arrow").toggle(function(e) {
	var $target = $(e.currentTarget), $w_cnt = $target.parents(".w-title:first").siblings(".w-cnt-contain:first");
	$w_cnt.slideUp(500);
	$target.addClass("arrowDown");
},function(e) {
	var $target = $(e.currentTarget), $w_cnt = $target.parents(".w-title:first").siblings(".w-cnt-contain:first");
	$w_cnt.slideDown(500);
	$target.removeClass("arrowDown");
});

将不能使用下面的代码得到展开时点击收缩，不能区分，使用判断区分

$(".widget .w-title .desc-arrow").live("click",function(){
	var $target = $(this);
	var $w_cnt = $target.parents(".w-title:first").siblings(".w-cnt-contain:first");

	if($target.hasClass("arrowDown")){
		$w_cnt.slideDown(500);
		$target.removeClass("arrowDown");
	}else{
		$w_cnt.slideUp(500);
		$target.addClass("arrowDown");
	}
	
});