使用切换系统在悬停时淡出答案

【问题标题】：Fade on hover using toggle system使用切换系统在悬停时淡出
【发布时间】：2015-06-03 02:55:29
【问题描述】：

当我悬停一个项目时，应该可以看到其他内容。这行得通，但我怎样才能为它设置动画呢？我希望它淡入而不是变得清晰可见。

function toggle(){
    var workshopscontainer = document.getElementById("workshops-container");
    workshopscontainer.classList.toggle("toggle");
}

$(".clip").hover(function(e) 
{
    e.preventDefault();
    toggle();
});

这是我用来切换使项目可见的类的 javascript 代码。

我一直在尝试对不透明度进行过渡，但它似乎不起作用

.toggle {
    display: none;
    opacity: 0;

}

包括编辑 html

<div class="clip-wrapper">
        <div class="clip">
            <p>Workshops</p>
            <img name="workshops" alt="workshops" src="_img/wpic.png" width="422" height="750" />
        </div>
        <div id="workshops-container" class="toggle">
            <div class="workshop">
                <img name="workshop1" alt="workshop1" src="_img/ws1.png" width="placeholder" height="placeholder" />
                <header>
                    <h1>Workshop 1</h1>
                </header>
                <p>Lorum ipsum</p>
            </div>
            <div class="workshop">
            <img name="workshop2" alt="workshop2" src="_img/ws2.png" width="placeholder" height="placeholder" />
                <header>
                    <h1>Workshop 2</h1>
                </header>
                <p>Lorum ipsum</p>
            </div>
        </div>
    </div>

【问题讨论】：

可以在 Question 中包含html 吗？，描述“似乎不起作用”？ transition 没有出现在css 上？
@guest271314 好吧，它只是出现，没有任何过渡。我已经包含了 html 顺便说一句。

标签： javascript jquery hover jquery-animate

【解决方案1】：

尝试使用handlerIn、handlerOut 或.hover()、.fadeToggle()

$(".clip").hover(function() {
  $("#workshops-container").fadeToggle()
}, function() {
  $("#workshops-container").fadeToggle()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="clip-wrapper">
        <div class="clip">
            <p>Workshops</p>
            <img name="workshops" alt="workshops" src="_img/wpic.png" width="0" height="0" />
        </div>
        <div id="workshops-container" class="toggle">
            <div class="workshop">
                <img name="workshop1" alt="workshop1" src="_img/ws1.png" width="placeholder" height="placeholder" />
                <header>
                    <h1>Workshop 1</h1>
                </header>
                <p>Lorum ipsum</p>
            </div>
            <div class="workshop">
            <img name="workshop2" alt="workshop2" src="_img/ws2.png" width="placeholder" height="placeholder" />
                <header>
                    <h1>Workshop 2</h1>
                </header>
                <p>Lorum ipsum</p>
            </div>
        </div>
    </div>

【讨论】：

【解决方案2】：

既然你放了jQuery标签，那么你可以使用.fadeIn()..或多或少，像这样：

$(".clip").hover(function(e) 
{
    e.preventDefault();
    $("#workshops-container").fadeIn();
});

【讨论】：