Question

无法为行的扩展和行的滑动设置动画。

<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>

看起来像：

Picture of interface

最初突出显示的行将被关闭，然后在选择其中一个类别时打开。如果类别已经展开，它将关闭该行，如果选择了另一个类别，它将滑动到新类别。 我想我已经完成了它，但是当行被滑过时它不会显示新的类别。 注意：突出显示的框是唯一受影响的框。

将其想象为页面顶部的导航，但不必悬停，您必须单击，切换菜单之间会有动画。

单击类别锚点后，它将运行此功能：

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;
    }
}
}

UPDATE ::我一直在努力，我认为它做得对，但最初的开放和滑动，它会跳开而不是动画：/

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

Answer 1

你需要得到

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

内部

if(row_open == "") {}

Answer 2

通过扩展您的选择器并进行其他一些更改，您应该能够消除绝大多数代码。看看这个：

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

Answer 3

修复它，这是一个css问题，该行应该显示：none和内部类别应该显示：block

jQuery扩展和滑动框

3 个答案: