50%/50% divs, trên nhấp chuột 100% hoạt hình

Question

gì là tôi thực hiện:

tôi đang làm việc trên một trang web với 2 "bên" khác nhau, khi bạn click vào phía bên trái, phía bên trái cần phải là 100%. Nếu bạn bấm vào phía bên phải, phía bên phải phải là 100%.

Xong rồi:

tôi đã thực hiện ở phía bên trái và phải. Và hoạt hình với Jquery.

Vấn đề
Khi bạn bấm vào bên trái div các hình ảnh động đang làm việc (Nó chỉ làm việc khi tôi thêm vị trí tuyệt đối), nhưng khi tôi cố gắng để tạo ra các hình ảnh động tương tự cho phía bên phải; nó không hoạt động! Tôi đã tạo một jsFiddle để bạn có thể xem mã hiện tại: http://jsfiddle.net/sh3Rg/

Tôi không thể làm đúng. Khi bạn nhấp vào div bên phải; nó cần phải hoạt hình đến 100%. Giống như cái bên trái.

Mã

Bạn có thể xem trước sống và mã ở đây: http://jsfiddle.net/sh3Rg/

HTML:

<div id="left"></div> 
<div id="right"></div> 

JS:

<script> 
$('#left').click(function(){ 
    $('#left').animate({width:'100%'}, 2500); 
}); 
</script> 
<script> 
$('#right').click(function(){ 
    $('#right').animate({width:'100%'}, 2500); 
}); 
</script> 

CSS:

html,body { 
    padding:0; 
    margin:0; 
    height:100%; 
    min-height:100%; 
    background-color: #000000; 
} 
p { 
    cursor: pointer; 
    color: #FFF; 
} 
#left { 
    width: 50%; 
    height: 100%; 
    background: #666; 
    float: left; 
    cursor: pointer; 
    position: absolute; 
} 
#right { 
    width: 50%; 
    height: 100%; 
    background: #063; 
    float: right; 
    cursor: pointer;  
} 

Hy vọng rằng ai đó có thể giúp tôi. Trân trọng, Milan

PS: Nếu tôi đăng/đã làm gì đó sai trong chủ đề này; Tôi xin lỗi, đây là câu hỏi đầu tiên của tôi.

Answer 1

Tôi đã làm một công việc nhỏ xung quanh. Tôi đã chỉnh sửa fiddle của bạn Vui lòng kiểm tra xem nó.

http://jsfiddle.net/sh3Rg/4/

$('#left').animate({width:'0%'}, 2500); 
$('#right').animate({width:'100%'}, 2500); 

Hy vọng mã là rõ ràng đối với bạn. Xin vui lòng trong trường hợp của bất kỳ nghi ngờ.

Answer 2

Vấn đề là #right tăng đến 100%, nhưng nó phát triển dưới sự #left

Bạn nên đặt #right trên container trái sử dụng một vị trí khác ngoài static.

Vì vậy, sự kỳ diệu là:

• Sử dụng tuyệt đối hoặc cố định vị
• Khi được nhấp, thay đổi z-index của yếu tố tích cực để được lớn hơn z-index của người kia

 

#left, #right { 
    width: 50%; 
    height: 100%; 
    cursor: pointer; 
    position: absolute; 
} 
#left { 
    left:0; 
    background: #666; 
} 
#right { 
    background: #063; 
    right: 0; 
} 

Và tập lệnh :

var Z = 0; 
$('#left').click(function(){ 
    $('#left').css('z-index',Z++).animate({width:'100%'}, 2500); 
}); 




$('#right').click(function(){ 
    $('#right').css('z-index',Z++).animate({width:'100%'}, 2500); 
}); 

Xem ví dụ làm việc: http://jsfiddle.net/sh3Rg/19/

Answer 3

LIVE DEMO

HTML: (thêm một lớp cụ thể :)

<div id="left" class="toggWidth"></div> 
<div id="right" class="toggWidth"></div> 

JQ:

$('.toggWidth').click(function(){ 
    $(this).stop().animate({width:'100%'}, 2500) 
      .siblings('.toggWidth').stop().animate({width:'0%'}, 2500); 
}); 

Answer 4

sự cố của bạn rằng div trái được thiết lập đến 50% trước bên phải nên nó có ưu thế.

nó chính xác như đặt cài lại đến 50% và quyền 100%, nó sẽ được chính xác như nếu bạn đã đặt cả đến 50%

Answer 5

Thay vì mớ hỗn độn xung quanh với width và height, bạn có thể làm tất cả điều này với định vị.

Thiếu bit trong ví dụ của bạn là z-index, vì một div đã biến mất bên dưới phần còn lại.

Đây là số working example của tôi.

HTML:

<div id="left"></div> 
<div id="right"></div> 

CSS:

div { 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    z-index: 0; 
} 
#left { 
    background: #666; 
    left: 0; 
    right: 50%; 
} 
#right { 
    background: #063; 
    right: 0; 
    left: 50%; 
} 

jQuery:

$('div').click(function() { 
    $(this).css('z-index', 1); 
    if (this.id === 'right') { 
     $(this).animate({left: 0}, 2500); 
    } else { 
     $(this).animate({right: 0}, 2500); 
    } 
}); 

Answer 6

câu trả lời chấp nhận là đúng. Nhưng tại sao bạn đang làm width:100%? Khi tôi nhấp vào một div nó có 100% và sau đó tôi không thể quay trở lại trạng thái trước đó.Tôi đã thử nó với width:95%

Bạn có thể có một cái nhìn ở đây: http://jsfiddle.net/sh3Rg/24/