Question

So currently, I have three divs sliding horizontally to each other. Each div is on full width. My mark up is something like this:

<div id="menu">
    <a href="#block1">Go to block 1</a>
    <a href="#block2">Go to block 2</a>
</div>

<div id="block1">
    <?php
        $page = 'block1';
        //code to display corresponding content for block 1
    ?>
    <a href="#menu">Go back to menu</a>
</div>

<div id="block2">
    <?php
        $page = 'block2';
        //code to display corresponding content for block 2
    ?>
    <a href="#menu">Go back to menu</a>
</div>

With my current slider purely based on this fiddle - http://jsfiddle.net/webtiki/wtvaJ/2/ - what happens is that from the menu, when you click the link to go to block 2, it would slide through block 1 first before block 2.

Now this is supposedly okay, but the content for this will be expanding soon and I'm worried that when the block div count is more than four, it wouldn't look nice to slide through all three blocks first before arriving to block 4.

What I thought was something that would just get the value of the anchor clicked and change my markup to something like this:

<div id="menu">
    <a href="#block1">Go to block 1</a>
    <a href="#block2">Go to block 2</a>
</div>

<div id="block1">
    <?php
        switch ($page) {
            case 'block1':
                //code to display corresponding content for block 1
                break;
            case 'block2':
                //code to display corresponding content for block 2
                break;
        }
    ?>
    <a href="#menu">Go back to menu</a>
</div>

I also thought about changing the anchor to buttons to pass on the variable like this perhaps

<input type="button" value="block1" onClick="javascript:location.href = '#block1'" />

But of course, that redirects to the page itself (#block1) and not slide like when anchors are used

Any ideas? Thanks.

Answer 1

为了保持相同的代码并节省时间，最快速的编辑之一是缩短动画时间，保持清理幻灯片操作：

$('.wrapper').animate({marginLeft: margin},50);

您还可以拥有动态的低级动画时间，如：

$('.wrapper').animate({marginLeft: margin},1000/(pagenumber*5));

Answer 2

这是你想要的吗？ DEMO

<强>的变化：

var a = $(this).attr('href');
$('.page').hide();
$(a).toggle('slide');

Assign php variable value based on anchor/element clicked

2 个答案: