Question

我有这段代码：

<a onclick="show('div1')">Show Div 1</a>
<a onclick="show('div2')">Show Div 2</a>`

<div id="div1">This is Div 1</div>
<div id="div2" style="display: none;">This is hidden Div 2</div>

<script>
    var currentDiv = document.getElementById("div1"); 
    function show(divID) {
        var div = document.getElementById(divID);
        currentDiv.style.display = "none";
        div.style.display = "block";
        currentDiv = div;
    }
</script>

我想知道我是否可以在此脚本中进行转换，以便一个div淡出/滑出而另一个淡入/滑入。提前谢谢。

Answer 1

试试这个

＆＃13;

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');
        
        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });

});

＆＃13;

#left, #right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}

＆＃13;

<div id="left">
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

＆＃13;

演示Here

希望这有助于。

Answer 2

我建议你用一种不引人注目的方式编写javascript并使用jquery，因为它在问题中被标记。

＆＃13;

$('#linkWrapper a').on('click', function(e){
    e.preventDefault();
  $('.'+this.id).fadeIn().siblings('div:not(#linkWrapper)').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='linkWrapper'>
  <a href='#' id='div1'>Show Div 1</a>
  <a href='#' id='div2'>Show Div 2</a>
</div>
<div class='div1' style='display:none;'>div1</div>
<div class='div2' style='display:none;'>div2</div>

＆＃13;

Answer 3

您可以使用这些功能进行淡入淡出效果。

    function unfade(element) { 
  var op = 0.1; // initial opacity  
  element.style.display = 'block'; 
  var timer = setInterval(function () {
    if (op >= 1){
      clearInterval(timer); 
    } 
    element.style.opacity = op; 
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;
  }, 10); 
}

    function fade(element) {
  var op = 1; // initial opacity 
  var timer = setInterval(function () {
    if (op <= 0.1){
      clearInterval(timer);      
      element.style.display = 'none'; 
    } 
    element.style.opacity = op; 
    element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
    op -= op * 0.1; 
  }, 50); 
}

单击幻灯片更改div

3 个答案: