Trượt div trái/phải sử dụng jQuery

tôi thấy sau mã trong nhiều nơi để trượt trái/phải:Trượt div trái/phải sử dụng jQuery

$('#hello').hide('slide', {direction: 'left'}, 1000);

Tuy nhiên, tôi không thể có được nó làm việc. Đây là thử nghiệm tối giản mà tôi đang thử:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
    $(document).ready(function() { 
     $("#test").click(function() { 
      $('#hello').hide('slide', {direction: 'left'}, 1000); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <article > 
     <div id="hello"> 
      Hello  
     </div> 
     <p><span id="test">Test</span> 
    </arcticle> 
</body>

Tôi đã thử trong Chrome và Safari và nó không hoạt động.

Sự cố là gì? Có phương pháp làm việc khác để trượt sang trái/phải không?

Nguồn

2013-02-12 Victor Ronin

[Đó là vì Trang trình bày là một phần của Hiệu ứng giao diện người dùng jQuery.] (Http://jqueryui.com/effect/) – Ohgodwhy

$('#hello').hide('slide', {direction: 'left'}, 1000); yêu cầu thư viện jQuery-ui. Xem http://www.jqueryui.com

Nguồn

2013-02-12 00:08:37 Mooseman

Có, bạn cần jqueryUI. Xem ví dụ: http: //jsfiddle.net/9wLGY/ – Jeff

JSFiddle https://jsfiddle.net/ZQTFq/3372/ – iYazee6

Bạn dễ dàng có thể nhận được hiệu quả mà không cần sử dụng jQueryUI, ví dụ:

$(document).ready(function(){ 
    $('#slide').click(function(){ 
    var hidden = $('.hidden'); 
    if (hidden.hasClass('visible')){ 
     hidden.animate({"left":"-1000px"}, "slow").removeClass('visible'); 
    } else { 
     hidden.animate({"left":"0px"}, "slow").addClass('visible'); 
    } 
    }); 
});

Hãy thử điều này Fiddle làm việc:

http://jsfiddle.net/ZQTFq/

Nguồn

2013-02-12 00:20:15

Tôi không nghĩ rằng đây là cách sạch nhất để làm điều này nhưng t làm việc như một say mê. Tuy nhiên, tôi cần thiết đặt 'overflow-x: hidden;' –

Cách đơn giản nhất để làm điều đó là sử dụng jQuery và animate.css thư viện hoạt hình.

Javascript

/* --- Show DIV --- */ 
$('.example').removeClass('fadeOutRight').show().addClass('fadeInRight'); 

/* --- Hide DIV --- */ 
$('.example').removeClass('fadeInRight').addClass('fadeOutRight');

HTML

<div class="example">Some text over here.</div>

Dễ dàng đủ để thực hiện. Chỉ cần đừng quên để bao gồm các tập tin animate.css trong tiêu đề :)

Nguồn

2017-04-21 10:42:56 akshitsethi

$(document).ready(function(){ 
 
$("#left").on('click', function (e) { 
 
     e.stopPropagation(); 
 
     e.preventDefault(); 
 
     $('#left').hide("slide", { direction: "left" }, 500, function() { 
 
      $('#right').show("slide", { direction: "right" }, 500); 
 
     }); 
 
    }); 
 
    $("#right").on('click', function (e) { 
 
     e.stopPropagation(); 
 
     e.preventDefault(); 
 
     $('#right').hide("slide", { direction: "right" }, 500, function() { 
 
      $('#left').show("slide", { direction: "left" }, 500); 
 
     }); 
 
    }); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div style="height:100%;width:100%;background:cyan" id="left"> 
 
<h1>Hello im going left to hide and will comeback from left to show</h1> 
 
</div> 
 
<div style="height:100%;width:100%;background:blue;display:none" id="right"> 
 
<h1>Hello im coming from right to sho and will go back to right to hide</h1> 
 
</div>

$("#btnOpenEditing").off('click'); 
$("#btnOpenEditing").on('click', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    $('#mappingModel').hide("slide", { direction: "right" }, 500, function() { 
     $('#fsEditWindow').show("slide", { direction: "left" }, 500); 
    }); 
});

nó sẽ làm việc như quyến rũ hãy xem demo.

Nguồn

2017-07-20 08:40:19

Trượt div trái/phải sử dụng jQuery

Trả lời

Các vấn đề liên quan