Question

我正在尝试使用一个简单的幻灯片动画，将较大屏幕上的'mouseenter'/'mouseleave'转换为较小屏幕上的'click'功能，但无法正确使用它。

这个想法存在一个隐藏的div，左边距为负（-220px），在'mouseenter'或'click'上滑动到0边距，同时将当前div推出'mouseleave'的方式（+ 220px）左缘）。它在'mouseenter'和'mouseleave'以及第一次'click'ave'上工作正常，但是我想让它在第二次点击时恢复到默认状态，就像它在'mouseleave'上一样

marks

graphics2d.drawString(string, x, y);

createGlyphVector(frc, int[] glyphCodes)

Answer 1

使用.toggleClass()功能代替.click()

$('#mouseenter').mouseenter(function () 
{
    $('#mouseenter .box-heading').css('margin-left', '220px');
    $('#mouseenter .box-hidden-info').css('margin-left', '0');
});

$('#mouseenter').mouseleave(function () 
{
    $('#mouseenter .box-heading').css('margin-left', '0');
    $('#mouseenter .box-hidden-info').css('margin-left', '-220px');
});

$('#click').click(function () 
{ 
    $('#click .box-heading').toggleClass("addLeftMargin");
    $('#click .box-hidden-info').toggleClass("addLeftMargin");
});

.addLeftMargin
{
  margin-left: 220px;
}

.box {
  width: 220px;
  height: 220px;
  margin: 10px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  overflow: hidden;
}

.box-heading {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    -webkit-transition: 1s ease;
  transition: 1s ease;
}

.box-hidden-info {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    -webkit-transition: 1s ease;
  transition: 1s ease;
  margin-left: -220px;
}

.box-hidden-info p {
  font-size: 72%;
  width: 200px;
  margin: 0 auto;
  padding: 5px;
}

.box h1 {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 120%;
  padding: 10px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box" id="mouseenter">
    <div class="box-heading">
      <h1>Mouseenter</h1>
    </div>
    <div class="box-hidden-info">
      <p>Test text test text</p>
    </div>
</div>

<div class="box" id="click">
    <div class="box-heading">
      <h1>click</h1>
    </div>
    <div class="box-hidden-info">
      <p>Test text test text</p>
    </div>
</div>

Answer 2

您可以使用CSS mouseenter替换整个mouseleave / :hover函数

#mouseenter:hover .box-heading {
  margin-left: 220px;
}
#mouseenter:hover .box-hidden-info {
  margin-left: 0;
}

对于点击部分，您应该在元素本身上使用toggleClass()，如下所示：

$('#click').click(function () {
  $(this).toggleClass('click');
});

然后在CSS中，设置当父级添加了类#click时，.click的子元素的样式。

为了节省一些代码，您只需修改:hover CSS部分，因此它还包含.click状态：

#mouseenter:hover .box-heading,
#click.click .box-heading {
  margin-left: 220px;
}
#mouseenter:hover .box-hidden-info,
#click.click .box-hidden-info{
  margin-left: 0;
}

完整代码：

$('#click').click(function () {
  $(this).toggleClass('click');
});

.box {
  width: 220px;
  height: 220px;
  margin: 10px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  overflow: hidden;
}

.box-heading {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    -webkit-transition: 1s ease;
  transition: 1s ease;
}

.box-hidden-info {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    -webkit-transition: 1s ease;
  transition: 1s ease;
  margin-left: -220px;
}

#mouseenter:hover .box-heading,
#click.click .box-heading {
  margin-left: 220px;
}
#mouseenter:hover .box-hidden-info,
#click.click .box-hidden-info{
  margin-left: 0;
}

.box-hidden-info p {
  font-size: 72%;
  width: 200px;
  margin: 0 auto;
  padding: 5px;
}

.box h1 {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 120%;
  padding: 10px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="mouseenter">
  <div class="box-heading">
    <h1>Mouseenter</h1>
  </div>
  <div class="box-hidden-info">
    <p>Test text test text</p>
  </div>
</div>

<div class="box" id="click">
  <div class="box-heading">
    <h1>click</h1>
  </div>
  <div class="box-hidden-info">
    <p>Test text test text</p>
  </div>
</div>

Answer 3

您可以使用jQuery toggle函数在备用点击中获得另一种行为

$('#click').toggle(function () {
  //move right
}, function () {
  //move left
});

此处有更多详情https://api.jquery.com/toggle-event/

单击时更改边距，然后在第二次单击时恢复

3 个答案: