首页 新闻 赞助 找找看

$(this) jquery

0
悬赏园豆:10 [已解决问题] 解决于 2015-08-19 19:02
那么,问题出来了!
为什么$(this).next().行为,没有执行;是hide()和animate();
1
$(".exe_middle button").click(function() { 2 $(this).css("color","red"); 3 $(this).next().animate({left: 50,opacity: 'show'}, "slow"); 4 $(this).next().hide(); 5 });
1 <div class="exe_middle"><!--页面中部/正文-->
2     <div>
3         <button>动画演示</button>
4         <div class="item2">我是移动中的动画!</div>
5     </div>
6 </div>

 


易猜的主页 易猜 | 初学一级 | 园豆:136
提问于:2015-08-19 14:00
< >
分享
最佳答案
0

我本地测试了一下,可以隐藏,另外,你这段js是放在jQuery(document).ready事件里面的么?

收获园豆:10
顾晓北 | 专家六级 |园豆:10844 | 2015-08-19 14:18

是的放在$().ready(),你用了什么浏览器;我的是firefox,我感觉next()选择器出的问题,一直选取不中;

易猜 | 园豆:136 (初学一级) | 2015-08-19 17:29

@易猜: Chrome,可以隐藏,就你这代码直接复制到本地的测试页面的js是放在jQuery(document).ready里面。。。

 

还有一个问题,如果你不是本地页面,也就是说这个<button>标签是在form标签里面的话,这个<button>浏览器是会认为他是submit按钮的,会提交服务器,你看看是不是因为提交服务器了,导致你看不到效果?

顾晓北 | 园豆:10844 (专家六级) | 2015-08-19 17:46

情况一:

1 $(".item2").animate({height:"500px"});动画效果出现

 

情况二:

1 $(this).next().animate({height:"500px"});动画效果不显示
易猜 | 园豆:136 (初学一级) | 2015-08-19 18:02

@易猜: 

jQuery(document).ready(function () {
    
    $(".exe_middle button").click(function() {
         $(this).css("color","red");
         //$(this).next().animate({left: 50,opacity: 'show'}, "slow");
         //$(this).next().hide();
         $(this).next().animate({height:"500px"});
     });
});
<form action="http://www.baidu.com/s">
<input type="text" value="123"/>
    <div class="exe_middle"><!--页面中部/正文-->
     <div>
         <button>动画演示</button>
         <div class="item2" style="left:600">我是移动中的动画!</div>
     </div>
</div>
</form>

这个代码可以看到高度变了,然后跳转到了百度页面,也就是说,<button>是作为submit提交了form,不知道你的全部代码是什么样的,到底是哪儿出了问题。。。

顾晓北 | 园豆:10844 (专家六级) | 2015-08-19 18:22

@顾晓北: 你可以帮我远程吗?2268540447

易猜 | 园豆:136 (初学一级) | 2015-08-19 18:33
其他回答(1)
0

我不知道我理解对没有,animate “slow”是有延迟的,而hide是瞬间完成的,所以show还没完成的时候,却已经完成hide了。

应该这样写,animate有个回调函数,动画完成后的执行:

$(function () {
$(".exe_middle button").click(function () {
$(this).css("color", "red");
$(this).next().animate({ left: 50, opacity: 'show' }, "slow","",function(){
$(this).hide();
});

});
})

我也试过了,不知道是不是你想要的结果

伤心懒睡猪 | 园豆:346 (菜鸟二级) | 2015-08-19 14:22

情况一:

1 $(".item2").animate({height:"500px"});动画效果出现

 

情况二:

1 $(this).next().animate({height:"500px"});动画效果不显示
支持(0) 反对(0) 易猜 | 园豆:136 (初学一级) | 2015-08-19 18:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册