Question

我正在尝试创建一个代码，当我点击按钮（＆＃39; .click＆＃39;）时，它会替换掉（＆＃39; .name＆＃39;）

<div class="container">
        <h1 class="portfolio">Portfolio By</h1>
        <br> 
        <h1 class="click" > Click Me</h1>
        <h1 class="name">Eddie Weldon</h1>
    </div>

$('.click').click(function(){
    $('.click').fadeOut(3000).css({backgroundColor: rgba(59,207,119,.2)});
    $('.name').fadeIn();

    });

Answer 1

您可以通过执行以下操作来清理代码并使其更具可读性。这将允许您缓存选择器，同时将函数绑定到单击事件。

;(function($){
var click = $('.click'),
    name = $('.name'),

clickHandler = function(){
 $(this).fadeOut(3000).css({background-color: 'rgba(59,207,119, 0.2)'});
 name.fadeIn();
};

click.on('click', clickHandler);

})(jQuery);

Answer 2

$('.click').click(function(){
    $('.click').fadeOut(3000).css({"backgroundColor": "rgba(59,207,119,.2)"});
    $('.name').fadeIn();
});

.name{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <h1 class="portfolio">Portfolio By</h1>
        <br> 
        <h1 class="click" > Click Me</h1>
        <h1 class="name">Eddie Weldon</h1>
    </div>

我的jquery fadein fadeout代码有什么问题

2 个答案: