1

行の拡大と行のスライドのアニメーション化に問題があります。

<div>       
    <div>
        <h2><a href="#laptops" class="exp">Laptops</a></h2>
        <p>Laptops...</p>
    </div>
    <div>
        <h2><a href="#tablets" class="exp">Tablets</a></h2>
        <p>Tablets...</p>

    </div>
    <!--the row below is the one that will expand and move left/right -->       
    <div id="row1" class="expand intro_para">
        <div id="laptops" class="expand block">
            PAGE FOR Laptops this includes a lot of info
        </div>

        <div id="tablets" class="expand block">
            Page for tablets  this also includes a lot of info
        </div>
    </div>
</div>

次のようになります。

インターフェースの写真

最初はハイライトされた行が閉じられ、カテゴリの 1 つが選択されると開きます。カテゴリが既に展開されている場合は行が閉じられ、他のカテゴリが選択されている場合はスライドして新しいカテゴリが表示されます。ほぼ完了したと思いますが、行をスライドさせても新しいカテゴリは表示されません。 注: 強調表示されたボックスのみが影響を受けます。

ページ上部のナビゲーションのようなものだと考えてください。ホバーの代わりにクリックする必要があり、メニューの切り替えの間にアニメーションが表示されます。

カテゴリ アンカーをクリックすると、次の関数が実行されます。

function show(cat) {
console.log("B4side_open"+side_open+"row_open"+row_open+"cat_open"+cat_open);
var tcat = _.where(equipment, {title: cat});
var s = tcat[0].side;
var r = tcat[0].row;
//no row open

if(row_open == "") {
//open row to specified cat
    console.log("open row "+r+" to specified cat "+cat);
    //make category visible (within invisible box)
    $("#"+cat).css({"display": "block"});
    //open the row
    $("#row"+r).slideDown();
    row_open = r;
    side_open = s;
    cat_open = cat;
}
else {
//slide the expando to new cat OR close the exando
    if(s == side_open) {
        //close the expando
        console.log("close the expando for row "+r);
        //close the row
        $("#row"+r).slideUp();
        //make the category invisible (within invisible box)
        //$("#"+cat).css({"display": "none"});
        row_open = "";
        side_open = "";
        cat_open = "";
    }
    else {
        //slide the expando
        if (s == "left") {
            //slide right
            console.log("slide right");
            $("#"+cat).css({"display": "block"});
            $("#row"+r).animate({"margin-left": "0px"}, 1000);
            //make other invisible
        }
        if (s == "right") {
            //slide left
            console.log("slide left");
            console.log(cat+r)
            $("#"+cat).css({"display": "block"});

            //console.log($("#"+cat).css({"display": "block"}));
            $("#row"+r).animate({"margin-left": "-940px"}, 1000);
        }
        //make the category invisible (within invisible box)
        //$("#"+cat).css({"display": "none"});
        side_open = s;
        cat_open = cat;
    }
}
}

更新::私はそれに取り組んできました、私はそれが正しく行われたと思いますが、最初の開口部とスライドは、それが開いてアニメーション化されません:/

http://mulibraries.missouri.edu/reference/equipment/equipment.php

4

3 に答える 3

1

セレクターを広げたり、その他の変更を加えたりすることで、コードの大部分を削除できるはずです。これを見てください：

$("a.exp").click(function () {
  var foo = $(this.hash);     

  var leftColumn = $(".expand .block").index(foo) % 2 == 0;
  var animateOut =  { "margin-left": "-924px" };
  var animateIn =  { "margin-left": "0px" }; 
  $(".expand .block").slideUp(400, function() { $(this).animate(animateOut);});
  foo.slideDown(400, function() { foo.animate(animateIn);});
  return false;
});
于 2013-01-24T21:41:55.400 に答える
1

取得する必要があります

if (s == "left") {}
if (s == "right") {}

中身

if(row_open == "") {}
于 2013-01-24T20:45:35.397 に答える
0

それを修正しました。行がdisplay:noneで、内側のカテゴリがdisplay:blockであるはずだったCSSの問題でした。

于 2013-01-24T21:35:08.453 に答える