Question

我根据下拉菜单中的选择过滤div，它会使所有显示所选值的div显示，然后其他所有内容都显示css属性display：none;有没有办法制作动画，以便它不是那么严酷的过渡？

的jQuery

$(function(){
    $("#map-date, #map-type, #map-county").change(function (){
        var filters = $(this).val();
        $("div.map-thumb").css({"display":"none"});
        $("div[class*='" + filters + "']").show();
    });
});

HAML

.row#map-thumbnail-wrapper
  .medium-4.columns
    %select#map-type
      %option.filter{value: "all"} Type of Program
      - MapChoices['program'].each do |program|
        %option.filter{value: program.downcase.gsub(' ', '-')}= link_to program, '#'
  .medium-4.columns
    %select#map-date
      %option.filter{value: "all"} Date Constructed
      - [*2007..Date.today.year].each do |year|
        %option.filter{value: year}= year
  .medium-4.columns
    %select#map-county
      %option.filter{value: "all"} County
      - current_locations = @cms_page.children.published.map { |i| cms_page_content(:county, i).capitalize }.keep_if(&:present?).uniq.sort
      - current_locations.each do |county|
        %option.filter{value: county.downcase.gsub(' ', '-')}= link_to county, '#'
.well-thumbnails
  - @cms_page.children.published.in_groups_of(6, false) do |location_row|
    .row
      - location_row.each do |location|
        .medium-2.columns
          - date_created = cms_page_content(:date_created, location)
          .map-thumb.all{class: "#{cms_page_content(:program, location).downcase.gsub(' ', '-')} #{DateTime.parse(date_created).strftime('%Y') if date_created.present?} #{cms_page_content(:county, location).downcase}"}
            - preview_image = cms_page_content('preview.image', location)
            = link_to image_tag(preview_image.file.url(:original)), location.full_path if preview_image
            .map-yellow
            .map-align-mid
              .thumb-text-wrapper
                = cms_page_content(:name, location)

Answer 1

执行此操作的标准方法是淡出（aka opacity = 0），然后在动画完成后使用display none。然后，一旦你想要它返回使它成为一个显示类型，然后淡入（opacity = 1）。

Answer 2

这就是最终的工作

<强>的jQuery

$(function(){
    $("#map-date, #map-type, #map-county").change(function (){

      var filters = $(this).val();
      $("div.map-thumb").animate({opacity: 0});

      setTimeout(function() {
        $("div.map-thumb").css({"display":"none"});
        $("div[class*='" + filters + "']").show().animate({opacity: 1});
      }, 500); 
    });
});

有没有办法动画显示：无？

2 个答案: