-1

我需要在 jquery 中更改动画代码。代码从左到右打开一个带有动画的 div，我需要从上到下发生这种情况。

我放了一个链接来共享代码以获取更多信息。

http://jsfiddle.net/HDWVH/

<body>
<!-- Botón que activa el panel -->
<a href="#" id="abre_tab">
<div id="tab"> 
    <div id="tab_interna"></div>
</div> 
</a>
<!-- Panel oculto -->
<div id="panel">
<div class="contenido">
    <h3>Download</h3>
</div>    
</div>
<h1>WEB'S BODY</h1>
</body>
</html>


{#tab {
width:50px;
height:40px;
position: fixed;
top: 0;
left: 35%;
display:block;
cursor:pointer;
background-color:#232526;
border-radius: 0 0 10px 10px;
padding: 0 5px 5px 5px; 
}       
#tab_interna {
border-radius: 0 0 5px 5px;
width: 100%;            
height: 100%;
background: #CCC url('arrow-down.png') no-repeat center center;
}               
#tab_interna:hover {
background-position: 9px 10px;
}
.expandida {
background: #CCC url('arrow-up.png') no-repeat center center !important;
}       
.expandida:hover {
background-position: 9px 1px !important;
}

#panel {
position: fixed;
top: 0;
left: 30%;
background-color:#CCC;
height:100px;
width:0px;
font: 18px Arial;
color: #707275;
text-align: center;
border-radius: 0 0 15px 15px;
}
#panel h3 {
margin: 0;
margin-bottom: 15px;
text-transform: uppercase;
}

#panel .content {
width:320px;
margin: 5px auto;
}
}


{$(function(){
var $contenido = $(".contenido").hide(),
  $tab = $('#tab'),
  $tab_interna = $('#tab_interna'),
  $panel = $('#panel')
  $abre_tab = $('a#abre_tab');

$abre_tab.on('click',function(e){ e.preventDefault();});

var toggle = true;
$tab.on('click', function() {

    if (toggle) {
        $tab
            .stop()
            .animate({
                top: "104px",
            },500, function (){
                $tab_interna.addClass('expandida');
            });
        $panel
            .stop()
            .animate({
                width: "200px",
                opacity: 0.8
            }, 500, function(){
                $contenido.slideDown('slow');
            });    
    } else {
        $contenido.slideUp('slow', function() {
            $tab
                .stop()
                .animate({
                    top: "0"
                },500, function() {
                    $tab_interna.removeClass();
                });
            $panel
                .stop()
                .animate({
                    width: "0",
                    opacity: 0
                },500);    
        });
    }
    toggle = !toggle;
    });
    });
    }

谢谢。

4

1 回答 1

4

Something like this?

http://jsfiddle.net/HDWVH/4/

//Function show and hide download.
$(function(){
  var $contenido = $(".contenido").hide(),
      $tab = $('#tab'),
      $tab_interna = $('#tab_interna'),
      $panel = $('#panel')
      $abre_tab = $('a#abre_tab');

  $abre_tab.on('click',function(e){ e.preventDefault();});

  var toggle = true;
  $tab.on('click', function() {

        if (toggle) {
            $tab
                .stop()
                .animate({
                    top: "100px",
                },500, function (){
                    $tab_interna.addClass('expandida');
                });
            $panel
                .stop()
                .animate({
                    height: "100px",
                    opacity: 0.8
                }, 500, function(){
                    $contenido.slideDown('slow');
                });    
        } else {
            $contenido.slideUp('slow', function() {
                $tab
                    .stop()
                    .animate({
                        top: "0"
                    },500, function() {
                        $tab_interna.removeClass();
                    });
                $panel
                    .stop()
                    .animate({
                        height: "0",
                        opacity: 0
                    },500);    
            });
        }
        toggle = !toggle;
  });
});

Panel CSS:

#panel {
    position: fixed;
    top: 0;
    left: 40%;
    background-color:#CCC;
    height:0px;
    width:200px;
    font: 18px Arial;
    color: #707275;
    text-align: center;
    border-radius: 0 0 15px 15px;
}

So, basically, just few js/css changes - now height is animated, and #panel div css is changed accordingly (no height at start - 100px at the end of animation)

于 2013-07-14T21:31:20.293 回答