0

这是我发现的一个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. 而不是常规链接，它们将是 < option >s
  2. 如果用户选择了某个选项，则与该选项相关的 div 将在向上移动 5px 时淡入。如果之前有一个 div 淡入，则该 div 会在向下移动 5px 时淡出。

这是一个更新的jsfiddle。不幸的是，它们div's并没有淡入/淡出，最重要的是，我不确定如何添加“向上/向下移动”效果。

任何帮助表示赞赏！

4

3 回答 3

2

您正在绑定选项上的单击事件，这不起作用。您需要监听 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);
});

小提琴

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


})

小提琴

于 2013-09-30T15:57:58.887 回答
1

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

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

演示

于 2013-09-30T16:01:12.813 回答
0

工作演示

试试这个

$('#stateList').change(function(){
  $('.state').fadeOut(550);
    var region = $("#stateList option:selected").data('region');
  $('#' + region).fadeIn(550);
})
于 2013-09-30T16:06:22.293 回答