的jquery

Question

我有一个非常具体的问题，我不确定你能用css做我想做的事。对于我在其他帖子上看到的内容，这可能是有限的，但我想我会问，以防有一些css天才。我想实现一个非常具体的行为。我有一列文字，该栏中的一些单词会突出显示。单击该单词时，我希望拆分文本并向上滑动视频。

我的HTML很简单：

<p>text<span id="clickable" class="link">highlighted text</span>.
    <div class="closed">
            <video id="video" width="100%">
                <source src="myVideo.mp4" type="video/mp4">
            </video>
    </div>text</p>

css包含关闭的类（高度为0），类打开时具有一定的高度

CSS

.closed {
    overflow: hidden;
    height: 0px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
}

当单击文本并播放视频时，js将类打开，所有这些都非常直接

的JavaScript

$(document).ready(function() {
  $("#clickable").click(function() {
    var vid = document.getElementById("video");
    var closed = $('.closed');
    if(closed.hasClass("open")) {
      closed.removeClass('open');
      vid.pause();
    } else {
      closed.addClass('open');
      vid.play();
    }
  });
});

一切正常。但事情就是这样，我知道我很挑剔，所以我不确定css是否可以做到这一点。我遇到的问题是＆＃34; clickable＆＃34;之后的文本。跳到下一行。我希望它不要这样做，因为它扰乱了阅读。我知道这种情况正在发生，因为我拥有视频的div是一个块元素。但是如果我改变标签使它成为一个跨度（我知道，一个异端），就像这样：

    <span class="closed">
            <video id="video" width="100%">
                <source src="myVideo.mp4" type="video/mp4">
            </video>
    </span>

视频拒绝遵循

overflow: hidden;

规则并且不会隐藏在视线之外，这是我想要做的事情的重点。添加

display: inline-block;

div没有做到这一点。我已尝试过一些花车，但我在Chrome中遇到了不稳定的行为。所以我的想法已经不多了。我希望视频的行为像内联元素。有人可以把我从痛苦中解救出来并告诉我它无法完成，所以我可以继续前进。谢谢你的时间。

----------------------------------------------- - - - - - - - - -编辑 - - - - - - - - - - - - - - - - -----------------------------

这是我的项目的gif图。这是＆＃34; div＆＃34;选项，它的工作方式与我想要的情况不同，因为正如我所说的那样，视频文本移动到我不想要的下一行。

GIF：

Answer 1

段落（p）元素中应该没有div元素。即使为div设置了display: none，它也会导致该段落关闭。如果使用F12工具检查DOM，可以看到该行为，并在this post中找到有关该主题的更多详细信息。

您可以使用跨度替换div以避免换行，在隐藏视频时设置display: none，并在显示视频时切换到display: block。

当视频可见时，文本中会出现换行符。该问题的一个解决方案是将视频动态地定位在线的末尾。可以通过获取视频后面的一些文本并将其移动到位于视频前面的跨度内来完成。

这些建议在this jsfiddle中实施。您可以更改容器宽度以测试行为。

<强> HTML：

<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation <span id="clickable" class="link">ullamco</span>
        <span id="spanBefore"></span>
        <span id="spanVideo" class="closed">
            <video id="video" width="100%">
                <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
            </video>
        </span>
        <span id="spanAfter">laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
            qui officia deserunt mollit anim id est laborum.
        </span>
    </p>
</div>

<强> CSS：

#spanVideo
{
    overflow: hidden;
    transition-property: height;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.closed
{
    display: none;
}

.open1
{
    display: block;
    height: 0vw;
}

.open2
{
    height: 65vw;
}

.link
{
    background-color: yellow;
    cursor: pointer;
}

Javascript代码：

var $spanVideo = $("#spanVideo");

function setVideoPosition() {
    var $spanClickable = $("#clickable");
    var $spanBefore = $("#spanBefore");
    var $spanAfter = $("#spanAfter");

    $spanAfter.text($spanBefore.text() + $spanAfter.text());
    $spanBefore.text("");

    var yBefore = $spanClickable.offset().top;
    var words = $spanAfter.text().split(/(\s)/);

    while ($spanAfter.offset().top <= yBefore && words.length > 0) {
        $spanBefore.text($spanBefore.text() + words.shift());
        $spanAfter.text(words.join(""));
    }
}

$("#clickable").click(function () {
    var video = document.getElementById("video");
    if ($spanVideo.hasClass("closed")) {
        setVideoPosition();
        $spanVideo.toggleClass("closed").toggleClass("open1");
        setTimeout(function () {
            $spanVideo.toggleClass("open2");
            video.play();
        }, 50);
    } else {
        video.pause();
        $spanVideo.toggleClass("open2");
        setTimeout(function () {
            $spanVideo.toggleClass("open1").toggleClass("closed");
        }, 2000);
    }
});

Answer 2

这是你追求的吗？

假设#clickable是文本（不在OP的代码中）。在类.clickable中制作它，因为将它作为id似乎没有任何优势。
向.frame添加中立类 span.closed，然后将span.frame.closed更改为div.frame.closed并添加display:inline-block它也是。
更改了jQuery，以便在.opened切换时，状态类 .closed和div.frame均匀交替显示。
在div.frame和video#video上添加了对状态的转换。 video#video在已打开状态上正常运行，但在已关闭状态仍然突然，我们将为OP打开该作业。
将float添加到div.frame.opened和所有p aragraph，并期望文字围绕div.frame.opened。浮动是变幻无常的，更好的选择是flexbox。由于时间原因，没有使用flexbox。

段

$(document).ready(function() {
          $(".clickable").click(function() {
            var vid = document.getElementById("video");
            var frame = $(this).next(".frame");
            if (frame.hasClass("opened")) {
              vid.pause();
              frame.removeClass('opened').addClass('closed');;
              
            } else {
              frame.addClass('opened').removeClass('closed');
              vid.play();
            }
          });
        });

.closed {
  overflow: hidden;
  height: 0px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.closed #video {
  opacity: .3;
  height: 0px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.opened {
  height: 190px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  float: left;
  display: inline-block;
}
.opened #video {
  opacity: 1;
  height: 190px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
p {
  float: right;
  margin: 5px 0;
}
.clickable {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="clickable">Attack of opportunity bolster undead class darkness ethereal plane grab infection inflict spell initiative modifier movement modes natural armor bonus paladin plant domain plant type sonic attack spell failure staggered suppress surprise tiny.</p>
<div class="frame closed">
  <video id="video" width="50%" controls="">
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
  </video>
</div>
<p>5-foot step charm subschool class level coup de grace creation subschool critical hit massive damage natural nauseated paladin</p>

Answer 3

阅读完编辑后，我制作了可以帮助您使用zer00ne视频的代码

的jquery

$(document).ready(function() {
  $("#text").on('click', function(event) {
    $("#video").slideToggle(400);
  });
});

的CSS

  #video {
    width: 25vw;
    height: 25vh;
    display: none;
    position: absolute;
    z-index: 100;
  }

HTML

<p id="text"><a href="#">
  Click me Click meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick me
  </a>
  </p>
    <video id="video" controls="">
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
  </video>


Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. 
</p>

我基本上添加了绝对位置，然后使用jquery来显示视频，希望这有助于

你可以在这里看到它 https://jsfiddle.net/nbkn6u3d/

如何让文本和视频一起流动

3 个答案:

段

的jquery

的CSS

HTML