在期权选择上移动div并淡入

Question

这是我找到的一个小提琴。

<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. 而不是常规链接，它们将是< option >的
2. 如果用户选择了某个选项，则与该选项相关的div将在上升5px时逐渐消失。如果有一个已经褪色的div，那么这个div就会在下降5 5px时逐渐消失。

下面是一个更新的小提琴。不幸的是，div's并没有消失，而且最重要的是，我不知道如何添加“向上/向下”的效果。

任何帮助都是非常感谢的！

Answer 1

您是绑定单击事件的选项，这不是那样的工作。您需要侦听select元素的更改事件。

尝试：

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

小提琴

关于动画边距的问题，您可以使用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);


})

小提琴

Answer 2

您需要用select而不是option绑定事件。尝尝这个

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

演示

Answer 3

工作演示

尝尝这个

$('#stateList').change(function(){
  $('.state').fadeOut(550);
    var region = $("#stateList option:selected").data('region');
  $('#' + region).fadeIn(550);
})