Jquery 设置div动画并使其向下滑动
作为一个新的jQuery,我很难将代码组合在一起,使div从左侧到右侧动画化,然后向下滑动。向下滑动之前,div的高度约为10px,然后向下滑动至351px的全高。 我可以单独完成以上操作,但不能合并!!请给我一点指导,谢谢。 这是我目前的代码Jquery 设置div动画并使其向下滑动,jquery,jquery-animate,slidedown,Jquery,Jquery Animate,Slidedown,作为一个新的jQuery,我很难将代码组合在一起,使div从左侧到右侧动画化,然后向下滑动。向下滑动之前,div的高度约为10px,然后向下滑动至351px的全高。 我可以单独完成以上操作,但不能合并!!请给我一点指导,谢谢。 这是我目前的代码 $.hideAllExcept = function(tabs,boxes){ function init() { // make it bookmarkable/refreshable. but, no history. var hash =
$.hideAllExcept = function(tabs,boxes){
function init() {
// make it bookmarkable/refreshable. but, no history.
var hash = window.location.hash;
(!hash) ? hideShow('#' + $(boxes+':first').attr('id')) : hideShow(window.location.hash);
// add click handler.
$(tabs).click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
// add back the hash which is prevented by e.preventDefault()
window.location.hash = href;
hideShow(href);
});
}
function hideShow(el) {
$(boxes).animate({"left": "-650px"}, "slow");
$(el).fadeIn('slow').animate({"left" : "60%",height:"351" }, 1000);
$(tabs).removeClass('active');
$('a[href="' + el + '"]').addClass('active');
}
init();
};
取得了一点进步!! 我让它在临时服务器上运行: 但是我无法让框返回到LHS,也无法看到文本是如何可见的,因为文本在html中,而不是div中的图像,这是否意味着我无法隐藏文本? 提前谢谢
(function($){
$.hideAllExcept = function(tabs,boxes){
function init() {
// make it bookmarkable/refreshable. but, no history.
var hash = window.location.hash;
(!hash) ? hideShow('#' + $(boxes+':first').attr('id')) : hideShow(window.location.hash);
// add click handler.
$(tabs).click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
// add back the hash which is prevented by e.preventDefault()
window.location.hash = href;
hideShow(href);
});
}
function hideShow(el) {
$(el).animate({"left": "-650px"}, "slow").fadeIn('slow');
$(el).fadeIn('slow').animate({"left" : "60%" }, 1000).animate({"height" : "351" }, 1000);
$(tabs).removeClass('active');
$('a[href="' + el + '"]').addClass('active');
}
init();
};
你试过将这两种效果链接在一起吗?将它们拆分为两个animate()函数,然后按所需顺序链接它们:
$(el).fadeIn('slow').animate({"left" : "60%"}, 1000).animate({"height:"351" }, 1000);
每个animate()函数都按顺序运行,因此您可以一个接一个地执行任意数量的效果。如果希望一个动画在另一个动画完成后触发,请使用的回调: 伪ish代码:
$(selector).animate({ key: val },
'slow' /*easing*/,
function() {
// second animation goes here
});