Question

当我悬停某个项目时，应该可以看到其他内容。这有效，但我怎么能给它制作动画呢？我希望它能够淡入而不是变得明显可见。

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>

Answer 1

由于您添加了jQuery标记，因此可以使用.fadeIn() ..或多或少，类似这样的内容：

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

Answer 2

尝试使用library(rvest) library(dplyr) dog <- data.frame(url=c("https://en.wikipedia.org/wiki/Dog", "https://en.wikipedia.org/wiki/Dingo", "https://en.wikipedia.org/wiki/Canis_lupus_dingo")) # this keeps the code clean and readable and testable extract <- function(x, css) { # this catches retrieval errors pg <- try(html(x), silent=TRUE) # if any retrieval error, return NA if (inherits(pg, "try-error")) { return(NA) } pg %>% html_nodes(css) %>% html_text -> element # if there is no matching element the resule will be a 0 length list # which will prevent sapply from simplifying it, so test for that here element <- ifelse(length(element) == 0, NA, element) element } # add as a column to the original data frame dog %>% mutate(text=sapply(as.character(url), extract, "p:nth-child(4)")) -> dog glimpse(dog) ## Observations: 3 ## Variables: ## $ url (fctr) https://en.wikipedia.org/wiki/Dog, https://en.wikipedia.... ## $ text (chr) "The domestic dog (Canis lupus familiaris or Canis famili... # or just get it out as a separate vector dog$url %>% as.character %>% sapply(extract, "p:nth-child(4)") ## https://en.wikipedia.org/wiki/Dog ## "The domestic dog (Canis lupus familiaris or Canis familiaris) is a domesticated canid which has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes.[2] The global dog population is estimated to between 700 million[3] to over one billion, thus making the dog the most abundant member of order Carnivora.[4]" ## https://en.wikipedia.org/wiki/Dingo ## "The dingo's habitat ranges from deserts to grasslands and the edges of forests. Dingoes will normally make their dens in deserted rabbit holes and hollow logs close to an essential supply of water." ## https://en.wikipedia.org/wiki/Canis_lupus_dingo ## NA handlerIn，.hover()，handlerOut

.fadeToggle()

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

使用切换系统淡入鼠标悬停

2 个答案: