Question

我创建了一个小例子，请看看， http://jsfiddle.net/bWTwL/ 我希望有一个这样的面板，以便： 1.li（home）.click＆gt;向左滑动面板＆gt;内容淡入 2.X（点击）＆gt; content fadeOut＆gt;向右滑动面板

现在，我有7个列表项，如home，about me等。我希望当用户点击任何列表项时，该列表项的特定内容（主页，关于我等）应该淡入。如果面板已经可见，那么只有内容应该在点击时淡入/淡出。我想为每个函数编写每个函数，但这将是一个非常冗长的代码。

我认为html5 data-attribute之类的东西可以完成这项任务但却失败了。请在此处看到相同的效果以便更好地理解：http://www.unpezvivo.com/proyectos/themeforest/cspp/02/#

提前致谢。

Answer 1

Something along these lines will work fine.

1。 CSS

div.panel {
    display:none;
    position: absolute;
    top: 0;
    width:70%;
    right:0%;
    height: 100%;
    z-index: 3;
    margin: 0;
    overflow:hidden;
    background-color:black;
}
.panel div.content {
    display:none;
    font-family:arial;
    color:white;
    padding:50px;
    overflow:hidden;
}
span.close {
    position:absolute;
    right:10px;
    top:15px;
    cursor:pointer;
}

2。标记

<ul id="menu">
    <li><a id="home" href="#">Home</a></li>
    <li><a id="about-me" href="#">About Me</a></li>
</ul>

<div class="panels">
    <div class="panel home">
        <div class="content">
            <span class="close">X</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
        </div>
    </div>
    <div class="panel about-me">
        <div class="content">
            <span class="close">X</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
        </div>
    </div>
</div>

3。 jQuery的

$(document).ready(function() {
    var $panels = $('.panels > .panel');
    $('#menu > li').on('click', 'a', function() {
        $panels.filter('.'+this.id).trigger('togglePanel');
    });
    $panels
        .on('togglePanel', function(){
            var $this           =   $(this)
              , $activePanels   =   $panels.filter(':visible').not($this);
            if ($activePanels.length) {
                $activePanels
                    .one('panelHidden', function(){
                        $this.is(':visible')
                        ? $this.trigger('hidePanel')
                        : $this.trigger('showPanel');
                    })
                    .trigger('hidePanel');
            } else {
                $this.is(':visible')
                ? $this.trigger('hidePanel')
                : $this.trigger('showPanel');
            }
        })
        .on('hidePanel', function(){
            var $this = $(this);
            $this.find('.content').fadeOut(500, function() {
                $this.animate({
                    'width': 'hide'
                }, 1000, function(){
                    $this.trigger('panelHidden');
                });
            });
        })
        .on('showPanel', function(){
            var $this = $(this);
            $this.animate({
                'width': 'show'
            }, 1000, function() {
                $this.find('.content').fadeIn(500, function(){
                    $this.trigger('panelShown');
                });
            });
        });
    $panels.find('.content .close').on('click', function() {
        $(this).closest('.panel').trigger('togglePanel');
    });
});

我使用了pub/sub pattern，这让事情变得更轻松。我们最小化冗余代码。工作流程更容易理解。

我强烈建议您使用namespaces for custom events（例如togglePanel，hidePanel，showPanel，...）。我没有在这段代码中这样做，因为对于新手脚本编写者来说它已经很复杂了，而且作为一项功课可以让你继续使用这段代码。

Answer 2

将它们设为同一个类（例如，myclass），然后使用this：

$('.myclass').on('click', function() {
    $(this).animate({
        'width': 'show'
    }, 1000, function() {
        $(this).fadeIn(500);
    });
});

实际上，我刚刚测试了上面的代码并且它不起作用，因为淡入的元素与您单击的元素不同，因此第二个this不引用正确的元素。您需要能够使用其DOM关系（例如，孩子）引用您想要淡入的那个与被点击的那个。（见this。）

所以你可以：

$('.myclass').on('click', function() {
    $(this).animate({
        'width': 'show'
    }, 1000, function() {
        $(this).children(.class2).fadeIn(500);
    });
});

为此，您需要设置不同的HTML，而不是将菜单和面板分开。您可以使用CSS将元素放在.class2中，如何使用它们。

或者，你可以给所有东西一个唯一的ID，所以菜单项＃M1触发面板项＃P1，＃M2触发＃P2等......

[Shef的回答比我的好得多！]

Answer 3

在事件函数中使用$（this）而不是特定的CSS选择器。这将引用触发对象：

$(this).fadeOut();

您可以通过逗号分隔与选择器结合使用：

$(".slide", this).fadeOut();

jquery淡入淡出滑板

3 个答案:

1。 CSS

2。标记

3。 jQuery的