Question

我有一个面板面板类的面板。它具有默认的蓝色。我也有一个按钮。当我单击按钮时，我想将面板边框的颜色从蓝色更改为绿色，然后再次更改为蓝色（某些过渡效果会更好）。如何使用jquery和CSS实现此目标。

Answer 1

您可以使用jQuery

这样操作

$('.btn').on('click', function () {
    $('.panel-body').toggleClass('panelBorderColor')
})

.panel-body {
    width: 100px;
    height: 100px;
    background-color: teal;
    border: 2px solid blue;
    transition: all .5s;
}

.panelBorderColor {
    border-color: green;
    transition: all .5s;
}

<div class="panel-body"></div>
<button class="btn">Click</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Answer 2

您可以尝试以下方法：

var $j = jQuery.noConflict();

$j(".panel-body").hover(
    // hover begin (mouse-in)
    function () {
        $j("#rfrsh_btn").css({"border-color": "green"});
    },
    // hover end (mouse-out)
    function () {
        $j("#rfrsh_btn").css({"border-color": "blue"});
    }
);

这是基于以下答案：jQuery noob: change border color of element on hover of another element

Answer 3

类似的事情应该起作用：

$("yourbutton").click(function(){
   $("yourpanel").css({"border-color": "green", "transition": "all 1.2s"});
});

Answer 4

您可以使用toggleClass

CSS

# generating some pseudo data from a poisson distribution
A <- data.frame(k = rpois(2000, 4))
B <- data.frame(k = rpois(1000, 7))

# Create identifier
A$id <- "A"
B$id <- "B"

A_B <- rbind(A, B)

g <- ggplot(data = A_B, aes(x = k, 
                            group = id, colour = id, fill = id)) + # fill/colour aes is not required
  geom_density(alpha = 0.6) # alpha for some special effects

g

JS

.bg-color { width: 50px; height: 50px; background-color: yellow; border:solid 1px green; }
.bg-color.green {border:solid 1px red; }

HTML

$(".bg-color").click(function () {
   $(this).toggleClass("green");
});

Answer 5

您可以使用.closest() jQuery方法遍历层次结构以找到最接近的div （或者，您可以使用.closest('.panel-body')来指定与类最接近的父级（parent-body） 在特定按钮上方。 。也就是说，使用$('.panel-body')将找到所有面板主体div。

要提供过渡效果，可以使用transition CSS指令。这样使用它：

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

最后，我们可以使用setTimeout()将下一条指令延迟几秒钟- 重要：请确保setTimeout()延迟 （ 2800ms） 长于过渡延迟 （2s，即2000ms）。

$('.panel-body button').click(function(){
  $this = $(this)
  $this.closest('div').addClass('brdGreen');
  setTimeout(function(){
      $this.closest('div').removeClass('brdGreen');
  },2800);
});

.panel-body{
  height:100px;
  width:200px;
  border:1px solid blue;
  outline:blue;
  XXXtransition: border 2s ease-out 0s; /* remove XXX to see effect */
}
.brdGreen{
  border:2px solid green;
  XXXtransition: border 2s ease-out 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="panel-body">
    <button>Click Me</button>
</div>

参考文献：

https://css-tricks.com/almanac/properties/t/transition/

https://stackoverflow.com/a/55894602/1447509

如何切换onclick边框的颜色？

5 个答案:

参考文献：