왼쪽에서 오른쪽으로 Jquery 슬라이드가 작동하지 않습니다.

Question

div를 클릭하면 jquery에서 오른쪽 슬라이드 왼쪽에서 슬라이드를 가져 오려고합니다. 이것은 내가 사용중인 HTML입니다.

<div id="myDiv" style="height: 70px; display: none; background-color:#eee; position: absolute; bottom: 1px; width: 100%"> 
<img style="margin-left: 9px; top: 8px; position: absolute" id="transparent-image" src="images/hover.png" alt=""> 
<p class="bi" style="display: inline; color: black; margin-left: 7%; position: absolute">Webbing in an alternative social network. based on intrests and interactions between people all over the world.</p> 

그리고 이것은 내가 사용하려고 JQuery와있다. 내가 달성 한 무엇

$(function() 
{ 
    $("#toggle").click(function() { 
    $(".sliding").css("display","none"); 
    //$(".sliding").animate({left:'-240px'}); 
    // Set the effect type 
    var effect = 'slide'; 

    // Set the options for the effect type chosen 
    var options = { direction: 'left' }; 

    // Set the duration (default: 400 milliseconds) 
    var duration = 10000; 

    $('#myDiv').toggle(effect, options, duration); 
    }); 

는 사업부가 onclick을 표시하고이지만, 왼쪽에서 오른쪽으로 아웃 슬라이딩되지 않습니다. 제발 도와주세요. 도와 주셔서 감사합니다. 감사.

jsfiddle 링크도 추가했습니다. http://jsfiddle.net/yLyr599z/

Answer 1

나는 이것이 당신이 원하는 생각 :

$(function() { 
 
    $("#toggle").click(function() { 
 
     $("#myDiv").animate({right:'0'}); 
 
    }); 
 
});

#toggle{ 
 
    position: absolute; 
 
    left: 10px; 
 
    bottom: 10px; 
 
    cursor: pointer; 
 
} 
 

 
#myDiv { 
 
    height: 70px;  
 
    background-color:#eee; 
 
    position: absolute; 
 
    bottom:0; 
 
    right: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="toggle"> 
 
\t Text to click. This will be an image though. 
 
</div> 
 
<div id="myDiv"> 
 
\t This text should slide out from left to right and overlap the onclick text. 
 
</div>

키 몇 가지 : jQuery를에

1. , 당신은 animate 방법을 사용해야합니다 .
2. 슬라이드하는 텍스트를 클릭 대상으로 사용하는 텍스트 (또는 이미지)와 겹쳐 지도록하려면 원본 순서대로 다른 텍스트를 배치하십시오. 즉, HTML 예제에서 두 번째 div로 지정하십시오.
3. myDiv의 시작 위치는 왼쪽에서 모두 오프 스크린입니다. CSS에서는 배치 된 요소에 right: 100%을 사용하여이 작업을 수행 할 수 있습니다.
4. 너비가 100 %이기 때문에 슬라이딩 요소의 끝 위치는 right: 0입니다. 이것이 jQuery의 애니메이션 메서드에 전달한 값입니다.

Answer 2

몇 가지 사항을 변경했습니다. 당신이 필요로하는 것은 아래와 같은 기능이라고 생각합니다.

 function slide(){ 
 
\t \t \t //$("#toggle").css({'display':'none'}); // line 1 
 
\t \t \t $("#myDiv").css('display','inline'); 
 
\t \t \t $("#myDiv").animate({'width': 500},2000,function(){ 
 
\t \t \t }); 
 
\t \t \t // remove below and uncomment line 1 to remove the toggle div immediately 
 
\t \t \t $("#toggle").animate({'width': 0},2000,function(){ 
 
\t \t \t \t $("#toggle").css({'display':'none'}); 
 
\t \t \t }); 
 
\t \t }

\t #toggle{ 
 
\t \t \t position: absolute; 
 
\t \t \t background : red; 
 
\t \t \t height : 50px; \t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t .old { 
 
\t \t \t position: absolute; 
 
\t \t \t display : none; 
 
\t \t \t width : 0px; 
 
\t \t \t height : 50px; 
 
\t \t \t background : green; \t 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<span> 
 
\t \t <div id="myDiv" class = "old"> 
 
\t \t \t This text should slide out from left to right and overlap the onclick text. 
 
\t </div> 
 
\t </span> 
 
\t \t <div id="toggle" class="sliding" onClick = "slide()" > 
 
\t \t \t Text to click. This will be an image though. 
 
\t \t </div>

나는 당신에게 일어난 것은 슬라이딩 부분 1 위를 타고 DIV를 표시 할 CSS 속성을 변경라고 생각합니다. 따라서 실제 슬라이딩을 볼 수는 없지만 슬라이딩 후에는 표시가 영향을 미치기 때문에 슬라이딩 후에 볼 수 있습니다. 그러나 그것이 사실인지 아닌지는 확실하지 않습니다.

Answer 3

$(function() { 
 
    $("#toggle").click(function() { 
 
     $("#myDiv").animate(left:'0'}); 
 
    }); 
 
});

#toggle{ 
 
    position: absolute; 
 
    left: 10px; 
 
    bottom: 10px; 
 
    cursor: pointer; 
 
} 
 

 
#myDiv { 
 
    height: 70px;  
 
    background-color:#eee; 
 
    position: absolute; 
 
    bottom:0; 
 
    right: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="toggle"> 
 
\t Text to click. This will be an image though. 
 
</div> 
 
<div id="myDiv"> 
 
\t This text should slide out from left to right and overlap the onclick text. 
 
</div>