Helpex - Trao đổi & giúp đỡ Đăng nhập
70

jQuery's .animate()buộc kiểu overflow: hiddenkhi được kích hoạt, gây rối với phần tử hoạt hình của tôi vì tôi có một phần tử khác đang treo, với vị trí phủ định, bên ngoài nó. có cách nào để tránh điều đó không?

70 hữu ích 4 bình luận 29k xem chia sẻ
51

Một cách khác là khai báo phần tử as ! Important trong css.

Ví dụ.

.somediv {
  overflow: visible !important;
}
51 hữu ích 3 bình luận chia sẻ
30

Đây là mã nguồn:

  if ( isElement && ( p === "height" || p === "width" ) ) {
    // Make sure that nothing sneaks out
    // Record all 3 overflow attributes because IE does not
    // change the overflow attribute when overflowX and
    // overflowY are set to the same value
    opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
  ...
  ...
  ...
  }

if ( opt.overflow != null ) {
  this.style.overflow = "hidden";
}

Bạn có thể bình luận điều này nếu bạn muốn, hoặc chỉ cần sử dụng $('element').animate().css('overflow', 'visible');như đã đề xuất trước đó.

Lý do tràn được đặt thành ẩn là để các phần tử trong phần tử đang được làm động sẽ được chứa trong phần tử khi nó đang được làm động. Ví dụ: nếu bạn giảm chiều rộng của một phần tử, nội dung của phần tử đó có thể cố kéo dài ra và "rơi" ra phía dưới.

Điều này được giải thích trong mã nguồn ở trên bằng nhận xét:

// Đảm bảo rằng không có gì đột nhập

Hy vọng rằng giải thích nó cho bạn.

30 hữu ích 0 bình luận chia sẻ
11

Bất kỳ giải pháp nào trong số đó đều hiệu quả với tôi, nhưng tôi đã tìm ra mẹo:

$(myDiv).animate(
   { height: newHeight},
   { duration: 500, 
     queue: false, 
     easing: 'easeOutExpo', 

     step: function() {
       $(myDiv).css("overflow","visible");
     }
   }
);

Buộc css trong mỗi bước của hoạt ảnh. Hy vọng nó giúp.

11 hữu ích 0 bình luận chia sẻ
4

Khi sử dụng $('element').animate().css('overflow', 'visible');nó có thể gây ra sự cố nếu overflow-xoverflow-yđã được chỉ định cho phần tử.

Trong những trường hợp sử dụng $('element').animate().css('overflow', '');mà chỉ cần loại bỏ các thuộc tính tràn và giữ overflow-xoverflow-ynguyên vẹn.

4 hữu ích 0 bình luận chia sẻ
2

Bạn có thể vượt qua :

function(e){$('#something').css('overflowY', 'scroll');}

thành tham số tùy chọn .animate (), như một hàm để chạy khi hoạt ảnh 'hoàn tất', như sau:

$('#something').animate({
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll !important' //doesn't work
                }, { duration: 500, queue: false, complete: function(e){$('#something').css('overflowY', 'scroll');} } );
2 hữu ích 2 bình luận chia sẻ
1

Câu trả lời ưa thích của tôi là sử dụng $.Animation.prefilter. Đây là một ví dụ về jsfiddle.net.

Thiết lập bộ lọc trước:

jQuery.Animation.prefilter(function(element, properties, options) {
  if (options.overrideOverflow) {
    jQuery(element).css("overflow", options.overrideOverflow);
  }
});

Sau đó sử dụng nó

$(myDiv).animate(
  { height: newHeight},
  {
    duration: 500, 
    overrideOverflow: "visible" // Replace "visible" with your desired overflow value
  }
);

Lưu ý rằng bạn không thể sử dụng tên tùy chọn overflowvì jQuery sử dụng tên đó trong nội bộ.

Mặc dù tính năng này đã xuất hiện trong jQuery được một thời gian, nhưng có vẻ như tài liệu hướng dẫn vẫn chưa hoàn chỉnh. Nhưng tài liệu dự thảo có sẵn .

Cũng xem https://github.com/jquery/api.jquery.com/issues/256

1 hữu ích 2 bình luận chia sẻ
0

HOÀN HẢO "Eagle" (2 Bài Lên). Nếu tôi không tìm thấy câu trả lời của bạn, tôi đã tìm kiếm hàng giờ cho điều này, tôi cá.

"Eagle" đã đăng cách chính xác để giải quyết vấn đề này.

Tất cả các giải pháp khác chỉ là hack. Đây là cách chính xác (nhắc lại), đó là lý do tại sao họ cung cấp cho bạn tất cả các tùy chọn khi sử dụng lớp "animate".

Dưới đây là một số cài đặt có sẵn (từ tài liệu, https://api.jquery.com/animate/ ). Tôi cần cài đặt "hoàn thành" để thực hiện một hành động khi hoạt ảnh kết thúc.

    duration (default: 400)
    easing (default: swing)
    queue (default: true)
    specialEasing
    step
    progress
    complete
    start
    done
    fail
    always

Điều này sẽ giúp làm việc với hoạt ảnh dễ dàng hơn nhiều và tôi sẽ sử dụng định dạng này cho dù có cần hay không, cho tất cả các hoạt ảnh trong tương lai.

0 hữu ích 1 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ jquery css , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading