javascript - 向上移动 div 并淡入选项选择

Question

这是一个 jsfiddle我发现的。

HTML

<div class="container">
<header>
    <ul class="sidenav">
        <li><h2><a data-region="nav-1" href="#"><span class="title">About</span></a></h2></li>
        <li><h2><a data-region="nav-2" href="#"><span class="title">Services</span></a></h2></li>
    </ul>
</header>
<div id="nav-1" class="infozone z1"><p>Hello I'm box 1.</p></div>
<div id="nav-2" class="infozone z2"><p>Hello I'm box 2.</p></div>

CSS

.infozone{
    float:left;
    position:absolute;
    height:400px;
    width:800px;
    display:none;
}

.z1 {
    background-color: blue;
}

.z2 {
    background-color: red;
}

JS

$('.sidenav a').click(function(){
  $('.infozone').fadeOut(550);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(550);
})

我想做的是...

1. 而不是常规链接，它们将是 s
2. 如果用户选择某个选项，则与该选项相关的 div选项将在向上移动 5px 时淡入。如果有一个 div淡入之前，该 div 会在向下移动 5px 时淡出。

这是更新的 jsfiddle .不幸的是，div's 没有淡入/淡出，除此之外，我不太确定如何添加“向上/向下移动”效果。

感谢任何帮助!

Answer 1

您在选项上绑定(bind)了点击事件，但这种方式行不通。您需要监听 select 元素的 change 事件。

尝试:

$('#stateList').change(function(){
   var region =  $(this).find(':selected').data('region'); //get the data value of the selected option
  $('.state').fadeOut(550);
  $('#' + region).fadeIn(550);
});

Fiddle

关于动画边距的问题，您可以使用 fadeOut 的回调来实现。

$('#stateList').change(function () {
    var region = $(this).find(':selected').data('region');
    var $visible = $('.state:visible');
    if ($visible.length) $visible.animate({
        'margin-top': '5px'
    }, 550).fadeOut(550, function () {

        $('#' + region).fadeIn(550).animate({
            'margin-top': '0px'
        }, 550);

    });
    else $('#' + region).fadeIn(550).animate({
        'margin-top': '0px'
    }, 550);


})

Fiddle