http://jsfiddle.net/motocomdigital/uTV5k/18/
我已经使用切换而不是单击进行了更新-尽管仍然无法获得平滑的交替。
我在这里混合了javascript和jquery。
我正在尝试获取一个元素,因此当它被单击时,它会运行一个动画(打开)。在第二次单击时,动画运行到起点(关闭)。
但由于某种原因,我无法让第二次点击交替工作。谁能建议我做错了什么?谢谢
这$('.home-module').toggle
是我遇到的问题。
请参阅下面的脚本...
$(window).load(function(){
$(window).bind("orientationchange resize", function(e) {
$('.home-module').each(function() {
var homeModule = $(this).height(),
homeTitle = $(this).find('.home-title-button').outerHeight(),
homeStart = homeModule - homeTitle,
homeOpen = false;
$(this).find('.home-title').css("top", homeStart + "px");
$('.home-module').toggle(
function() {
// first alternation
$(this).find('.home-title').animate({ top: homeStart + "px" });
},
function() {
// second alternation
$(this).find('.home-title').animate({ top: 0 + "px" });
}
);
});
}).trigger("resize");
});
点击动画似乎真的没有反应,第二次点击/交替真的延迟并且做奇怪的事情?
谢谢
我的原始代码...
$(window).load(function(){
$(window).bind("orientationchange resize", function(e) {
$('.home-module').each(function() {
var homeModule = $(this).height(),
homeTitle = $(this).find('.home-title-button').outerHeight(),
homeStart = homeModule - homeTitle,
homeOpen = true;
$(this).find('.home-title').css("top", homeStart + "px");
$('.home-module').on('click', function () {
if (homeOpen) {
$(this).find('.home-title').animate({ top: homeStart + "px" });
homeOpen = false;
} else {
$(this).find('.home-title').animate({ top: 0 + "px" });
homeOpen = true;
}
});
});
}).trigger("resize");
});