使用js或jQuery顺利更改位置之前的伪类

Question

我在网站左侧tab内有 onclick show或hide 。

点击箭头并查看显示＆amp;隐藏这个左侧面板。

您会在tab

的左侧看到黄色图片

我想知道是否可以使用tab移动底部图片？

与tab移动顺畅一样，此图片必须随此移动tab

我需要在幻灯片隐藏时显示它必须在right side时显示它必须在left

$(function(){
	$('.slider-arrow').click(function(){
        if($(this).hasClass('show')){
	    $( ".slider-arrow, .panel" ).animate({
          left: "+=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('«').removeClass('show').addClass('hide');
        }
        else {   	
	    $( ".slider-arrow, .panel" ).animate({
          left: "-=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('»').removeClass('hide').addClass('show');    
        }
    });

});

.panel {
	width:300px;
	float:left;
	height:100px;
	background:#d9dada;
	position:relative;
	left:-300px;

}
.panel:before {
    background: url(https://image.ibb.co/jD3m2o/Summerbuble.png);
    content: "";
    position: absolute;
    width: 55px;
    height: 44px;
    bottom: -44px;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
}
.slider-arrow {
  height:90px;
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
      </div>
      
      <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

Answer 1

您无法直接操纵:before伪元素，但您可以使用:before上的类来操纵.panel元素的位置。例如（参见***行）：

$(function(){
	$('.slider-arrow').click(function(){
        if($(this).hasClass('show')){
	    $( ".slider-arrow, .panel" ).animate({
          left: "+=300"
		  }, 700, function() {
            // Animation complete.
            $(this).filter(".panel").addClass("showing"); // ***
          });
		  $(this).html('«').removeClass('show').addClass('hide');
        }
        else {   	
	    $( ".slider-arrow, .panel" ).animate({
          left: "-=300"
		  }, 700, function() {
            // Animation complete.
            $(this).filter(".panel").removeClass("showing"); // ***
          });
		  $(this).html('»').removeClass('hide').addClass('show');    
        }
    });

});

.panel {
	width:300px;
	float:left;
	height:100px;
	background:#d9dada;
	position:relative;
	left:-300px;

}
.panel:before {
    background: url(https://image.ibb.co/jD3m2o/Summerbuble.png);
    content: "";
    position: absolute;
    width: 55px;
    height: 44px;
    bottom: -44px;
    right: -44px;        /* *** */
    background-repeat: no-repeat;
    background-size: contain;
}
.panel.showing:before {  /* *** */
    left: 0px;           /* *** */
    right: auto;         /* *** */
}                        /* *** */
.slider-arrow {
  height:90px;
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
      </div>
      
      <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

我确定完全你想做什么（这对我来说仍然有点不清楚），但是你可以调整黄色三角形的位置。

否则，您必须将其从伪元素更改为真实元素。

您可能会考虑使用CSS过渡，这样可以更加顺畅地移动该伪元素：

$(function(){
	$('.slider-arrow').click(function(){
    $(".slider-arrow, .panel").toggleClass("show hide");
  });
});

.panel {
	width:300px;
	float:left;
	height:100px;
	background:#d9dada;
	position:relative;
	left:-300px;
}
.panel.show {
    transition: left 700ms;
}
.panel.hide {
    left: 0px;
    transition: left 700ms;
}

.panel::before {
    background: url(https://image.ibb.co/jD3m2o/Summerbuble.png);
    content: "";
    position: absolute;
    width: 55px;
    height: 44px;
    bottom: -44px;
    right: 300px;
    background-repeat: no-repeat;
    background-size: contain;
}
.panel.show::before {
    transition: right 700ms;
}
.panel.hide::before {
    /*transition: left 700ms;*/
    transition: right 700ms;
    /*left: auto;*/
    right: -44px;
}

.slider-arrow {
  height:90px;
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
  background:yellow;
}
.slider-arrow.show {
  transition: left 700ms;
}
.slider-arrow.hide {
  left: 0px;
  transition: left 700ms;
}
.slider-arrow.show::after {
  content: '»';
}
.slider-arrow.hide::after {
  content: '«';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel show">
</div>
<a href="javascript:void(0);" class="slider-arrow show"></a>