Несколько эффектов jQuery с одним .click - PullRequest
Новая
       18

Несколько эффектов jQuery с одним .click

4 голосов
/ 24 августа 2011

Я очень хорошо знаком с HTML и CSS, но плохо знаком с Javascript и jQuery. Я пытаюсь выяснить, как сделать несколько эффектов jQuery с одним событием (.click).

У меня есть DIV (.bio-описание), в котором много текста. Я сделал высоту DIV .bio-description всего 50px и установил переполнение скрытым. Когда кто-то щелкает DIV .bio-readmore, я бы хотел, чтобы произошло следующее: 1) высота DIV .bio-description установлена ​​на «auto» (поэтому весь текст теперь виден), 2). и 3) Появляется DIV без био-чтения.

Я довольно много читал на jQuery.com и много искал в Google. Я, наверное, уже сталкивался с ответом, но просто не понял, как его реализовать.

Ниже приведен код, который у меня есть. .Bio-readmore скрывается при нажатии, но два других действия не выполняются. Я также пробовал разные эффекты, отличные от .height, такие как .css, .addClass и .animate. Однако ничего не работает, и я полагаю, что это как-то связано с тем, как я пытаюсь обработать несколько эффектов одним событием.

Спасибо за любую помощь, которую вы можете предложить!

-Mark 

<script>
$(document).ready(function(){

    $(".bio-readmore").click(function() {
            $(".bio-description").height("auto");
        }, function () {
            $(".bio-readmore").hide();
        }, function () {
            $(".bio-readless").show();
        });

});

</script>

<style type="text/css">

#wrapper {width:600px; margin:0 auto;}

.bio-description {background:#CCCCCC; padding:10px; height:50px; overflow:hidden;}

.bio-readmore {float:right; margin-right:40px; background:#66CC66; padding:3px;}

.bio-readless {display:none; float:right; margin-right:40px; background:#FF3333; padding:3px;}

</style>


</head>

<body>

    <div id="wrapper">

        <div class="bio-description">

            <p>Morbi ut tincidunt magna. Ut justo eros, gravida a interdum eget, molestie eget nibh. Morbi sed mauris lectus, id tincidunt lectus. Sed gravida consectetur enim sit amet sodales. Proin ligula metus, lobortis nec commodo rutrum, tincidunt sit amet turpis. Nullam condimentum urna nec libero fermentum non tristique dolor pulvinar. Cras tortor nisi, convallis a laoreet sit amet, bibendum sed nunc. Cras quam enim, mollis non hendrerit sit amet, ullamcorper quis libero.</p>

        </div>

        <div class="bio-readmore">Read More &#9660;</div>

        <div class="bio-readless">Read Less &#9650;</div>

    </div>

</body>

Ответы [ 6 ]

7 голосов
/ 24 августа 2011

Вы можете запустить целую функцию для события щелчка (несколько строк): 

$(".bio-readmore").click(function() {
            $(".bio-description").height("auto");
            $(".bio-readmore").hide();
            $(".bio-readless").show();
        });

aaaaaa, и все готово!Я люблю JQuery.

4 голосов
/ 24 августа 2011

Просто поместите все в одну функцию: 

    $(".bio-readmore").click(function() {
        var $this = $(this);
        var wrapper = $this.closest(".wrapper");
        wrapper.children(".bio-description").height("auto");
        $this.hide();
        wrapper.children(".bio-readless").show();
    });

Основываясь на комментариях Феликса, я сделал функцию немного более производительной. Это также потребовалось бы, если в вашем документе было несколько div.wrapper s.

3 голосов
/ 24 августа 2011

Может быть, я что-то упускаю, но разве вы не выполните процедурные строки? (это даже слово?) 

    $(".bio-readmore").click(function() {
        $(".bio-description").height("auto");
        $(".bio-readmore").hide();
        $(".bio-readless").show();
    });
2 голосов
/ 24 августа 2011

Просто выполните все функции одновременно, как в функции: 

$(".bio-readmore").click(function() {
    $(".bio-description").height("auto");
    $(".bio-readmore").hide();
    $(".bio-readless").show();
});
2 голосов
/ 24 августа 2011

Есть ли причина, по которой вы не просто выполняете все три в одном вызове функции? 

$(document).ready(function(){
    $(".bio-readmore").click(function() {
        $(".bio-description").height("auto");
        $(".bio-readmore").hide();
        $(".bio-readless").show();
    });
});
1 голос
/ 24 августа 2011

Похоже, вы хотите использовать .animate ({...}) в этом случае:

http://api.jquery.com/animate/

Вы можете использовать строку Json, чтобы предоставить список всех изменений, которые вы хотите сделать, анимация по клику.

...