jQuery slideUp анимация, чтобы показать больше контента - PullRequest
Новая
       23

jQuery slideUp анимация, чтобы показать больше контента

2 голосов
/ 21 февраля 2012

Я учу себя, как кажется, работая над этим проектом.

Я предполагал, что был бы очень простой способ реализовать эту технику, но я искал высоко и низко без удачи. Вот страница, на которую мы смотрим:

http://igs.link -networkonline.com / кампании десантно-страница /

Три просматриваемых меню в середине - это то, на что мы смотрим. Они почти закончены, мне просто нужна помощь, чтобы исправить некоторые ошибки.

  1. Div под вкладками скользит вниз, когда вкладка поднимается вверх. Скорее всего, потому что я использую отрицательное позиционирование, чтобы увеличить меню ... Я не знал, что еще делать!

  2. Если один из них открыт, при нажатии другого закрывается первый.

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

Проблемы, с которыми я сталкиваюсь сейчас:

а. Когда один из них открыт, а первый уже открыт, он закрывает первый, но из-за слишком большого увеличения отрицательного поля, используемого в нижнем элементе div, в результате нижний блок мешает вышеуказанному содержимому.

б. После первоначального открывания / закрывания переключение занимает 2 щелчка, что приводит к тому, что страница кажется сломанной.

Обновлен код: 

$(function() {
    $(".first").toggle(function() {
        $(".first").animate({'height': '295px', 'top': "-220px"});
        $('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".second").animate({'height': '75px', 'top': "0px"});
        $(".third").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-220px'});
        $(".form").animate({'margin-top': '-220px'});

    }, function() {
        $(".first").animate({'height': '75px', 'top': "0px", 'overflow': "hidden"});
        $('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'})
        $(".form").animate({'margin-top': '0px'});

    });
   $(".second").toggle(function() {
        $(".second").animate({'height': '275px', 'top': "-200px"});
        $('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".first").animate({'height': '75px', 'top': "0px"});
        $(".third").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-200px'});
        $(".form").animate({'margin-top': '-200px'});

    }, function() {
        $(".second").animate({'height': '75px', 'top': "0px"});
        $('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'});
        $(".form").animate({'margin-top': '0px'});
    });
    $(".third").toggle(function() {
        $(".third").animate({'height': '255px', 'top': "-180px"});
        $('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".first").animate({'height': '75px', 'top': "0px"});
        $(".second").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-180px'});
        $(".form").animate({'margin-top': '-180px'});

    }, function() {
        $(".third").animate({'height': '75px', 'top': "0px"});
        $('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'});
        $(".form").animate({'margin-top': '0px'});
    });

});

Очень благодарен за любые идеи или указания. Заранее благодарим вас за ваши знания!

1 Ответ

0 голосов
/ 21 февраля 2012

Простой способ сделать это - анимировать, например, .second и .third на .first, чтобы закрыть, анимировать .first и .third, чтобы закрыть на .second, щелкнуть и так далее ...

Вы можете изменить изображение следующим образом: 

$('.first img').attr('src','new_source.png');

Редактировать:

В нижнем поле останется анимация: обратите внимание, что это действительно не элегантный способрешения этого, но это работает: 

    $(".first").toggle(function() {
            $(".first").animate({'height': '270px', 'top': "-220px"});
            $(".second").animate({'height': '50px', 'top': "0px"});
            $(".third").animate({'height': '50px', 'top': "0px"});
            $("#bottom").animate({'margin-top': '-220px'});
        }, function() {
            $(".first").animate({'height': '50px', 'top': "0px"});
            $("#bottom").animate({'margin-top': '0px'});
    });

Редактировать 2:

Это должно работать для вас сейчас: 

var first = false;
var second = false;
var third = false;

    $(".first").click(function() {
        if(!first){
            first = true;
            second = false;
            third = false;
            $(".second").css({'margin-bottom': '0px'});
            $(".third").css({'margin-bottom': '0px'});
            $(".first").animate({'height': '295px', 'top': "-270px"},function() {
                $(".first").css({'margin-bottom': '-220px'});
            });
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button1").animate({'top': "-235px"});
            $("img.button2").animate({'top': "-25px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        } else if(first) {
            first = false;
            second = false;
            third = false;
            $(".first").css({'margin-bottom': '0px'});
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $("img.button1").animate({'top': "-25px"});
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        }
    });
   $(".second").click(function() {
        if(!second){
            first = false;
            second = true;
            third = false;
            $(".first").css({'margin-bottom': '0px'});
            $(".third").css({'margin-bottom': '0px'});
            $(".second").animate({'height': '295px', 'top': "-270px"},function() {
                $(".first").css({'margin-bottom': '0px'});
                $(".second").css({'margin-bottom': '-220px'});
                $(".third").css({'margin-bottom': '0px'});
            });
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button2").animate({'top': "-240px"});
            $("img.button1").animate({'top': "-25px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        } else if(second) {
            first = false;
            second = false;
            third = false;
            $(".second").css({'margin-bottom': '0px'});
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $("img.button2").animate({'top': "-25px"});
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $("body").animate({'padding-bottom': '0px'});
        }
    });
    $(".third").click(function() {
        if(!third){
            first = false;
            second = false;
            third = true;
            $(".first").css({'margin-bottom': '0px'});
            $(".second").css({'margin-bottom': '0px'});
            $(".third").animate({'height': '295px', 'top': "-270px"},function() {
                $(".third").css({'margin-bottom': '-220px'});
            });
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $("img.button3").animate({'top': "-210px"});
            $("img.button1").animate({'top': "-25px"});
            $("img.button2").animate({'top': "-25px"});
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
         } else if(third) {
            first = false;
            second = false;
            third = false;
            $(".third").css({'margin-bottom': '0px'});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $("body").animate({'padding-bottom': '0px'});
        }
    });

Обратите внимание, чтоэто не способ, как действительно решить что-то подобное, но это работает ..

...