0

我正在尝试将一个 DIV 从右向左滑动到另一个 DIV 上。它适用于最初的幻灯片，但它是不工作的幻灯片。它再次从右向左滑动消失，然后我尝试再次单击该按钮，但在第一次打开和关闭后它将不起作用。

我要遵循的代码：

function changeFeat () {
    if(jQuery('#featartinside').css('display') == 'none') {
        jQuery('#featartinside').animate({
            width: 730,
            marginLeft: 1,
            marginRight: -730,
            display: 'toggle'
        }, 'slow');
    } else {
        jQuery('#featartinside').animate({
            width: -730,
            marginLeft: 1,
            marginRight: 730,
            display: 'toggle'
        }, 'slow');
    }
}

#featartban {
    position: relative;
    background: url(../images/featart.png) top left no-repeat;
    width: 54px;
    height: 279px;
    cursor: pointer;
    float: left;
    left: 730px;
    margin-bottom: -279px;
}

#featartinside {
    height: 279px;
    width: 0;
    margin-left: 730px;
    background: #D13630;
    float: left;
    margin-bottom: -279px;
}

就像我说的那样，它可以很好地打开，但关闭不起作用，因为它继续从右到左而不是从左到右关闭。然后我无法打开和关闭第二次。

编辑 HTML：

<div id="featartban" onclick="changeFeat(); return false;"></div>
<div id="featartinside" style="display: none;"></div>
4

2 回答 2

2

坚持使用 jQuery。

<div id="featartban"></div>
<div id="featartinside" style="display: none;"></div>​


var $featartban = $("#featartban");
var $featartinside = $("#featartinside");
$featartban.toggle(function show() {
  $featartinside.animate({
    width: 730,
    marginLeft: 1,
    marginRight: -730,
    display: 'toggle'
  }, 'slow');
}, function hide() {
  $featartinside.animate({
    width: 0,
    marginLeft: 730,
    marginRight: 0,
    display: 'toggle'
  }, 'slow');
});​

.toggle()（不与 混淆.toggle()）很棒。

看到它住在这里。

于 2012-11-29T21:53:19.997 回答
0

你可以试试这个

JS：

/*creating click event*/
$(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

演示：http ://www.themeswild.com/read/slide-navigation-left-to-right

于 2016-09-30T07:07:43.420 回答