Question

我的div正确但当我再次点击时应该回到原来的位置.....

我尝试了很多东西但没有工作。这是我的代码...... 单击时如何反转它。每次点击它应该与前一个动作相反，即如果单击，则div向右移动，然后在下一次单击时，它应向左移动，类似于钟摆

<html>
<head><title></title>

<script type="text/javascript" language="javascript">
//<![CDATA[

window.onload=function()
{
document.getElementById("d2").onclick = slideIt;
};

function slideIt()
{
var slidingDiv = document.getElementById("d1");
var stopPosition = 50;

if (parseInt(slidingDiv.style.left) < stopPosition )
{
    slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
    setTimeout(slideIt, 1);

}
/*
if(parseInt(slidingDiv.style.left) > stopPosition )
{
    slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
    setTimeout(slideIt, 1);

}*/
  }

//]]>
</script>
</head>
<body>
<div id="d1" style="position:absolute; left:-131px;">
<div style=" float:left" >click here to slide the div</div>
<div id="d2" style=" float:left" >click here to slide the div</div> </div>
</body>
</html>

Answer 1

使用此更改您的JavaScript

<script type="text/javascript" language="javascript">

    $(document).ready(function(){   $("#d2").click(function(){
            if($("#d1").css("left") <="-131px") 
                {
               $("#d1").animate({left:'250px'});        
                }   
             else   {
            $("#d1").animate({left:'-131px'});      
                        }   
       }); 
  });
</script>

这样可以正常使用

祝你好运..

Answer 2

好的，这就是我做事的方式......

DEMO：http://jsfiddle.net/xDDX8/2/

HTML

<div id="d1">
    <div id="d2">click here to slide the div</div>
</div>

CSS

#d1 {
    position: absolute;
    border: 1px solid red;
    cursor: pointer;
    left: 0;
}
.moveLeft {
    color: blue;
}
.moveRight {
    color: lime;
}

的Javascript

window.onload = bindEvents();

function bindEvents() {
    document.getElementById('d2').onclick = slideIt;
}

// Global variables
var slidingDiv = document.getElementById('d1'); // Cache the element
var timeout = 0;
var minPosition = 0;
var maxPosition = 50;

function slideIt() {
    // Work out current position
    var currentPosition = slidingDiv.offsetLeft;

    // Check which direction to move
    if (hasClass(slidingDiv, 'moveRight'))
    {
        // Have we hit our movement limit?
        if (currentPosition <= minPosition)
        {
            // remove all classes and set a class to move the other direction
            slidingDiv.removeAttribute('class');
            slidingDiv.setAttribute('class', 'moveLeft');
            // Clear our timeout
            clearTimeout(timeout);
        }
        else
        {
            // Still space to move so let's move a few pixels (-)
            slidingDiv.style.left = (currentPosition - 2) + "px";
            timeout = setTimeout(slideIt, 1);
        }
    }
    else // all comments as above really
    {
        if (currentPosition >= maxPosition)
        {
            slidingDiv.removeAttribute('class');
            slidingDiv.setAttribute('class', 'moveRight');
            clearTimeout(timeout);
        }
        else
        {
            slidingDiv.style.left = (currentPosition + 2) + "px";
            timeout = setTimeout(slideIt, 1);
        }
    }
}

// Function to test whether an element has a specific class
// https://stackoverflow.com/questions/5898656/test-if-an-element-contains-a-class
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

每次单击向右滑动div一次，然后再次单击相同（左）

2 个答案:

HTML

CSS

的Javascript