$(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>
最佳答案
0
我本地测试了一下，可以隐藏，另外，你这段js是放在jQuery(document).ready事件里面的么？
收获园豆：10
是的放在$().ready()，你用了什么浏览器；我的是firefox，我感觉next()选择器出的问题，一直选取不中；
@易猜: Chrome，可以隐藏，就你这代码直接复制到本地的测试页面的js是放在jQuery(document).ready里面。。。
还有一个问题，如果你不是本地页面，也就是说这个<button>标签是在form标签里面的话，这个<button>浏览器是会认为他是submit按钮的，会提交服务器，你看看是不是因为提交服务器了，导致你看不到效果？
情况一：
1 $(".item2").animate({height:"500px"});动画效果出现
情况二：
1 $(this).next().animate({height:"500px"});动画效果不显示
@易猜:
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，不知道你的全部代码是什么样的，到底是哪儿出了问题。。。
@顾晓北: 你可以帮我远程吗？2268540447
其他回答(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();
});
});
})
我也试过了，不知道是不是你想要的结果
情况一：
1 $(".item2").animate({height:"500px"});动画效果出现
情况二：
1 $(this).next().animate({height:"500px"});动画效果不显示
