0

私は現在、勤務しているエージェンシーの新しいサイトを開発しています。このサイトは次の場所にあります。

http://www.astwood.co.uk/testsite/wordpress/

右上には、連絡先と会社概要セクションの追加コンテンツを下にスライドする2つのボタンがあります。次のjQueryを使用して、追加のdivの外観をアニメーション化しました。

ロード時にページのコンテンツを非表示にします。

$("#about").hide();
$("#contact").hide();

指定されたクラスのリンクがクリックされたときにコンテンツを表示および非表示にします。

$(".aboutbtn").click(function () {
   $('#contact').slideUp(
   function() {

        $('#about').slideToggle('slow');

   });
});

$(".contactbtn").click(function () {
   $('#about').slideUp(
   function() {

        $('#contact').slideToggle('slow');

   });
});

これはほとんどのブラウザで完全に機能します。既存の開いているdivがある場合はそれを非表示にしてから、指定されたセクションを開きます。ただし、Chrome for Macでは、ページの読み込み後に初めてボタンを押すと、要求されたコンテンツが下にスライドし、すぐに再び上にスライドします。

どんな助けでもいただければ幸いです。前もって感謝します。

4

4 に答える 4

0

とがChromeブラウザで遅く実行されている可能性があります$("#about").hide();（$("#contact").hide();私のPCのChromeで問題なく動作しているようです...）。

display:nonejQueryを使用して要素を非表示にするのではなく、要素にcssスタイルを配置してみてください。これは、ブラウザがそれらをレンダリングするとき（javascriptが実行される前でも）、それらが非表示になることを意味します。

于 2013-01-11T09:19:57.840 に答える
0

2つのアイデア：

  • に依存するのではなく、トグルアクションを自分で調整します.slideToggle()。
  • .stop(true,true)要求された要素を上下にスライドする前に発行します

理由を知るのは難しいですが、これらのいずれかまたは両方、あるいは両方が一緒になって正しい効果をもたらす可能性があります。

両方のアイデアのコードは次のとおりです。

$(".aboutbtn").click(function() {
    var $about = $("#about").stop(true,true);
    $("#contact").slideUp(function() {
        var fn = ($about.is(":hidden")) ? 'slideDown' : 'slideUp';
        $about[fn]('slow');
    });
});
于 2013-01-11T09:54:00.597 に答える
0

さて、jQueryがどのように機能するかを妨げていたのはブラウザプラグインでした。問題のブラウザ拡張機能はダブルクリックでした。これは次の場所にあります。

https://chrome.google.com/webstore/detail/double-click/mdoabndnbhmbbiggngmjbnoijnhfophe

于 2013-01-11T10:59:45.517 に答える
0

クリアを追加するだけです：slideToggle（）を適用するdiv/containerの両方に

アニメーションにはオーバーフローを非表示にする必要があり、高さを適切に取得できません。

それは明確に私のためにうまくいきました：両方。

于 2014-08-12T12:44:54.250 に答える