0

我是 jQuery 新手，正在尝试编写一个函数，用于在单击另一个链接时滑动 div。

我的问题是，当我给出静态方向时，该函数有效，但当我尝试给出动态方向时，该函数无效。

这是我的代码：

HTML：

<div id="popshbtn" onclick="uiSlide(this, '#popwrap', 'right')">
    <p>Feedback</p>
</div>

<div id="popwrap" class="popdnone">
    <h3 class="h3">Support</h3> 
</div>

CSS：

#popshbtn{
    background-color: #3385D6;
    color: #FFFFFF;
    font-size:16px;
    width:38px; height:188px;
    border:1px solid #2d7dcb;
    text-align:center;
    cursor:pointer;
    position:absolute;
    bottom:2%;
    right:0;
    z-index:999999;
}
#popshbtn:hover{
    background:#2d7dcb;
}
#popwrap{
    width:478px; 
    border:1px solid #ccc; 
    padding:10px; 
    background:#f5f5f5;
    position:absolute;
    top:20%;
    right:-500px;
    margin-left:-500px;
    display:none;
    height:400px;
}

jQuery :

function uiSlide(ths, target, direction){
console.log(direction);

if( $(target).is(':visible')){

    $(target).hide().animate({
        'direction': '-500px'
    },'fast', function(){
        //call back function
    })

}
else{
    $(target).show().css({
        direction: 0
    },'fast', function(){
        //call back function
    })
}

   }

此代码不起作用，除非我给出静态位置而不是方向。

我只想知道，有可能吗？如何确定动画的方向？

请让我知道，如果你有任何问题。

这是 js fiddle 链接http://jsfiddle.net/sarfarazdesigner/u25Ne/。

我上传了一张图片，它将帮助您更好地理解 在此处输入图像描述

4

1 回答 1

1

您可以在 animate() jquery API 方法中将对象作为参数传递，例如：

http://jsfiddle.net/u25Ne/3/

$(document).ready(function (e) {
  $('#popshbtn').click(function () {
    uiSlide(this, '#popwrap', 'right');
  })

  $('#popshbtn').html($('#popshbtn').text().replace(/(.)/g, "$1<br />"));
});

function uiSlide(that, target, direction) {
  var optionObj1 = {},optionObj2 = {};
  optionObj1[direction] = "-500px";
  optionObj2[direction] = 0;

  if ($(target).is(':visible')) {
    $(target).animate(optionObj1, 'fast', function () {
         $(this).hide();
    })

  } else {
    $(target).show().animate(optionObj2, 'fast', function () {

    })
  }

}
于 2013-01-11T13:08:17.220 回答