Question

下面是我的Css，我使用Jquery UI在两个div之间滑动，但是当动画发生时我正在丢失框阴影。你可以在这里看到演示https://jsfiddle.net/vfu2n7dk/3/。

  .step1,
    .step2 {
      width: 100%;
      position: absolute;
      background:blue; 
        -webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);

    }

    .slidecontainer {
      position: relative;
    }


    .footer {
        color: #696767;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.51);
        padding: 12px;
        border-bottom: 2px solid #0D4413;
    }

    .clickverify {
      color: red;
      cursor: pointer;
    }

Answer 1

我已对您的代码进行了一些更改，它现在正在使用。请检查CODE SNIPPET。

我希望它会对你有所帮助。

＆＃13;

df %>% select(-site) %>% names() %>% substr(1,3) %>% unique() %>%
  lapply(function(x){unite_(df, x, grep(x, names(df), value = TRUE), 
                            sep = '/', remove = TRUE) %>% select_(x)}) %>%
  bind_cols() %>% mutate(site = as.character(df$site)) %>% select(site, starts_with('D'))

# Source: local data frame [5 x 4]
# 
#    site   D01   D02   D03
#   (chr) (chr) (chr) (chr)
# 1     A   1/1   1/0   1/0
# 2     B   0/1   0/1   1/1
# 3     C   0/0   1/0   0/0
# 4     D   0/1   0/0   0/0
# 5     E   1/1   1/1   0/1

＆＃13;

 $(".clickverify").click(function() {
$(".step1").animate({ left:"-110%" }); 
$(".step2").animate({ right:"0%" }); 
 });

＆＃13;

.step1 {
  width: 100%;
  position: absolute;
  background:blue; 
    -webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
    left:0%;
    
    
}
.step2 {
  width: 100%;
  position: absolute;
  background:blue; 
    -webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
    right:-100%;
    
}

.slidecontainer {
  position: relative;
}


.footer {
    color: #696767;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.51);
    padding: 12px;
    border-bottom: 2px solid #0D4413;
}

.clickverify {
  color: red;
  cursor: pointer;
}

＆＃13;

盒子阴影在使用Jquery幻灯片时消失

1 个答案: