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

Question

当我将鼠标悬停在某个项目上时，应该可以看到其他内容。这行得通，但我该如何制作动画呢？我希望它淡入而不是变得清晰可见。

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

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

这是我用来切换 class 使项目可见的 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>

Answer 1

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

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

Answer 2

尝试利用handlerIn、.hover()、.fadeToggle()

的handlerOut

$(".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>

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

Fade on hover using toggle system

javascript

jquery

hover

jquery-animate