Question

我试图让div慢慢地横向动画这是可能的javascript我很新，这个和任何帮助将不胜感激。提前谢谢。

html在这里

<a href="#blue">Show Blue</a> | <a href="#red">Show Red</a> | <a href="#green">Show Green</a>

<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>

css在这里

div {
    display: block;
    width: 100px;
    height: 100px;
    display: none;
}

#blue {
    background: blue;
}

#red {
    background: red;
}

#green {
    background: green;
}

和javascript

if(window.location.hash) {
    var hash = window.location.hash;
    $('div').hide();
    $(hash).show();
}

$(window).on('hashchange', function() {
    var hash = window.location.hash;
    $('div').hide();
    $(hash).show();
});

小提琴在这里http://jsfiddle.net/aUsHh/3/

Answer 1

您可能希望在相对定位的容器中使用绝对定位的彩色div组。见：

http://jsfiddle.net/aUsHh/13/

CSS：

#slidercontainer {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
}
#slidercontainer div {
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
    opacity: 0;
}
#blue {
    background: blue;
}

#red {
    background: red;
}

#green {
    background: green;
}
}

JS：

var hash = "";
if(window.location.hash) {
    if (hash != "")
    $(hash).hide("slow");
    hash = window.location.hash;
    $(hash).show("slow");
}

$(window).on('hashchange', function() {
    $(hash).animate({'opacity': 0, 'left': "200px"});
    hash = window.location.hash;
    $(hash).css("left","-100px");
    $(hash).animate({'opacity': 1, 'left': "0px"});
});

Answer 2

您可以尝试以下代码...

if(window.location.hash) {
    var hash = window.location.hash;
    $('div').hide("slow");
    $(hash).show("slow");
}

$(window).on('hashchange', function() {
    var hash = window.location.hash;
    $('div').hide("slow");
    $(hash).show("slow");
});

或某些滑动效果

if(window.location.hash) {
    var hash = window.location.hash;
    $('div').slideUp("slow");
    $(hash).slideDown("slow");
}

$(window).on('hashchange', function() {
    var hash = window.location.hash;
    $('div').slideUp("slow");
    $(hash).slideDown("slow");
});

Answer 3

if(window.location.hash) {
    var hash = window.location.hash;
    $('div').slideUp();
    $(hash).slideDown();
}

$(window).on('hashchange', function() {
    var hash = window.location.hash;
    $('div').slideUp();
    $(hash).slideDown();
});

JSFiddle

Answer 4

尝试像这样的

if(window.location.hash) {
    var hash = window.location.hash;
    $('div').hide(1000);
    $(hash).show(1000);
}

$(window).on('hashchange', function() {
    var hash = window.location.hash;
    $('div').hide(1000);
    $(hash).show(1000);
});

你可以在jquery中使用时间隐藏和显示函数。它是1000 = 1秒。要么用户关键字“慢”作为默认值，如此

 $('div').hide('slow');
 $(hash).show('slow');

Answer 5

我建议使用fadeIn()

if(window.location.hash) {
    var hash = window.location.hash;
    $('div').hide();
    //change value accordingly for time
    $(hash).fadeIn(3000);
}

$(window).on('hashchange', function() {
    var hash = window.location.hash;
    $('div').hide();
    //change value accordingly for time
    $(hash).fadeIn(3000);
});

Fiddle Link

如何在Javascript中干净地动画一些东西？

5 个答案: