jQuery slideアニメーションをより多くのコンテンツを公開する

Question

私は自分自身を教えているjqueryは、このプロジェクトで作業中に見える。

私はこの手法を実装する方法が非常に簡単だと思っていましたが、私は運がないと高低を検索しました。ここでは、見ているページがある：3が途中でメニューをプルアップ

http://igs.link-networkonline.com/campaign-landing-page/

は、私たちが見ているものです。彼らはほとんど終了している、私はいくつかのバグを修正するのに役立つ必要があります。

1. タブが下にスライドすると、タブの下のdivが下にスライドします。それは私がメニューをもっと上げるために否定的なポジショニングを使用しているために最も可能性が高いです...私は他に何をすべきか分かりませんでした！

2. 1つが開いている場合は、別のをクリックすると、最初に閉じます。

これらの質問は非常に近いものであり、ユーザーの期待通りの機能を発揮しておらず、コードがヘッダーに保持されているとかなり嵩張っています。

私が今行っている問題：

a。最初のものが開いているときに最初のものが開いているときは最初のものが閉じられますが、下のdivで使用される負のマージンが大きすぎると、下のdivが上記の内容に干渉します。

b。最初の開閉トグルの後、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'}); 
    }); 

}); 

は非常に感謝。あなたの知識を事前におねがいします！

Answer 1

これを行う簡単な方法は、たとえばアニメーション化することです。

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

：あなたはこのようなもので、画像を変更することができます...ように、閉じて1次回アニメーションと.secondクリックで閉じるように.thirdとする.firstクリックで

を.secondと.third編集：

下のボックスには、このアニメーションに滞在します：それは、これを解決するのは本当に洗練方法ですが、それが動作することを 注：

$(".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'}); 
     } 
    }); 

これは本当にこのような何かを解決するためにどのような方法ではありませんが、それが動作することに注意してください。..